5 个免费的Web富文本编辑器

jopen 11年前

widgEditor

Sometimes all you really need is the bare minimum. The widgEditor is meant to be extremely light (only 33.4 KB), simple to use, and efficient. And it is.

Of all the editors in this article, widgEditor is also the simplest to add to your application. You start with a <textarea> like the one shown here:

<textarea id=”widgEditor”>Some Sample Text</textarea>

Notice the class attribute. You must include this attribute or else the widgEditor won’t do anything.

There’s no hosted site for this API, which makes sense because it’s so incredibly small. You download the API to your local drive and add links to the required CSS and script as shown here.

That’s it! This is all you need to use the widgEditor. When you load the page, you see an extremely basic editor like the one shown in Figure 1.

Notice the magnifying glass icon at the end of the buttons. That icon is unique amongst the editors reviewed in this article. When you click that icon, you switch the HTML view. If your user doesn’t see a required formatting tool, it’s easy to add the HTML to accommodate it by typing in the tags directly. Want to put some of the text in a blockquote? Switch to HTML and do it manually.

The main advantages of this API are simplicity, small code size, and ease of use. Its main disadvantages are that it may be too simple; the API lacks functionality and it’s really hard to add new features without some programming experience of your own. There’s no third party support for this API, but really, it’s not the sort of editor that would attract much third-party support.

Demo: The Man in Blue – widgEditor

Download: widgEditor 1.0.1

Documentation: Provided with download

TinyMCE

All that many users really want is a simple editor that allows them to add some basics, such as bold type, and to use styles, such as headings. The toolbar includes basic editing features. The user also has access to a host of additional editing features through the menu.

TinyMCE is easy to add to an application. You begin with a <textarea> tag like these:

One of these <textarea> tags is selected as part of the example script, the other isn’t. Adding support for TinyMCE consists of a simple <script> tag in the <head>, much as you would use for any other API. As with most APIs, you can download your own copy of the code or use a hosted version as shown here.

There are all sorts of ways in which you can modify the functionality of TinyMCE, which include the use of plug-ins. However, you can obtain a reasonably nice editor without doing much at all. Here’s the simplest script you can write to make TinyMCE functional.

The call to tinymce.init() with a selector value is all you need. You can use the same kinds of selectors that you use with CSS3, so there isn’t really any learning curve. Figure 2 shows the output you get for your efforts:

Five Free JavaScript Libraries to Add Text Editing to Your Application Fg02

Figure 2

You use standard POST methods to send the formatted output back to the server. The File menu contains an option for printing the formatted text as a default, but you can add other options to it by using plug-ins.

TinyMCE’s main advantages are that it’s self-contained and easy to use. However, the code is a little on the large size. Even if you use a local copy of the API, it does take a while to download to the user’s machine.

Demo: Tiny MCE Full-Featured Example

Download: Tiny MCE 4.0.x

Documentation: Tiny MCE Wiki Documentation

MarkItUp

One of the most popular APIs online is jQuery UI (and the underlying requirement, jQuery). MarkItUp is a jQuery plug-in that provides full text editing capabilities. However, it goes even further than that. You can configure MarkItUp so that it actually acts as a markup editor, so you can create markup and then view the output of that editor. For example, when you enter the tags required to format HTML directly, you can see the result of that markup as output from the editor.

Creating the editor begins with a <textarea> tag. You can add attributes to control the precise number of rows and columns the editor supports like this:

<textarea id=”markItUp” cols=”80″ rows=”20″>
Some Sample Text
</textarea>

In order to use this tool, you must download a copy of MarkItUp; there isn’t any hosted site. Then you can reference it and the required jQuery support like this:

The tool also requires CSS to style parts of the interface. You must specify both a skin (which determines the appearance of the editor) and a set (which determine the editor functionality) like this:

Anyone who’s used jQuery will recognize the script used to initiate MarkItUp immediately because it looks just like any other jQuery script. The following script shows the simplest way to initialize the editor, but you have considerable flexibility in setting things up.

The mySettings variable is defined as part of the MarkItUp code. However, you can modify it as needed to create the look you want. The code shown here creates a basic editor for markup that you can use to display formatted output as shown in Figure 3.

Five Free JavaScript Libraries to Add Text Editing to Your Application Fg03

Figure 3

MarkItUp is incredibly flexible and light. The downloads page has many add-ons, plug-ins, skins, parsers, and other functionality. However, MarkItUp has a relatively steep learning curve, especially if you decide to use a number of features together to create a unique editor.

Demo: markItUP! in Action

Download: markItUp! Download

Documentation: markItUp! Documentation 1.1

NicEdit

Some developers thrive on complex tools that have serious flexibility and a host of features; others just want to get the job done. NicEdit is for the developers who are in the latter crowd. It helps you get the job done quickly and easily.

As with most of the editors, you can start with one or more <textarea> tags. However, you can add NicEdit to other elements such as a <div> as well.

<textarea id=”NicEdit” cols=”80″ rows=”5″>Some Sample Text</textarea>
<textarea id=”NotNicEdit” cols=”80″ rows=”5″>Some Sample Text</textarea>
<div id=”NicEdit2″>Some Sample Text</div>

You get the best results when you specify a <textarea> size. Otherwise, I found, the controls tend to get cramped. When working with another element type, you don’t have to specify a size, but the editing area tends to be a bit small when you don’t. Use CSS to define the size when working with other elements.

The next step is to create a connection with the online library (or you can download a local copy performance reasons). This API is pretty small, so you won’t see too much of a performance advantage from using a local copy.

The script required to initialize the editor is quite simple when compared to some of the other offerings. All you need to do is tell the API to add a specific element to the list of editors as shown here.

In this case, the script adds an editor to one <textarea>, but not the other. In addition, it adds an editor to the <div> as shown in Figure 4.

Five Free JavaScript Libraries to Add Text Editing to Your Application Fg04

Figure 4

The editor has a full range of formatting capabilities including font family, font size, style, and color. You get basic functionality in a small package. In addition, NicEdit works with a range of element types, which gives it flexibility lacking in other APIs. The main disadvantage is that there’s a lack of features. Once you get past the basic editor, you really don’t have much room to grow.

Demo: NicEdit Demos 1-5

Download: NicEdit Components

Documentation: NicEdit Wiki

YUI 2: Rich Text Editor

Many free editors focus on enhancing plain text or markup. They provide a basic set of controls; some include plug-ins, add-ons, skins, and other functionality to dress things up.

The Yahoo! User Interface version 2 (YUI2) Rich Text Editor is anything but simple. You can use this editor for any purpose you can think of and probably a few you haven’t considered. The examples include everything from simple editors to code editors to editors with special features, such as a Flickr image search. Unlike most free editors, you have complete control over every aspect of the user interface.

YUI2 is actually part of a much larger library that includes a rich set of controls, animations, widgets, special features, and anything else you might need to create an application. In short, YUI2 is a substitute for jQuery and other APIs like it. (There is a YUI3 out, but the documentation for it is really hard to follow, the complexity is significantly greater, and I think most developers will find that YUI2 does everything needed for general application development.)

As with most editors, the Rich Text Editor relies on a <textarea> element as a starting point. You don’t have to specify a size for the <textarea>, but you can if you want to. The function used to create the editor accepts configuration information that overrides any information provided by the element.

<textarea id=”RichTextEdit” cols=”100″ rows=”5″>Some Sample Text</textarea>

In order for this API to work, you must set a body style. Otherwise, you’ll see a jumbled mess when you try to display the editor on screen. Here’s a typical style assignment:

The YUI2 API relies heavily on a number of external links. You begin by adding the CSS links used to format the output.

You need to make a number of API library references. Here’s the minimum configuration required for any application:

The scripts you see in my examples are a little more complex than they need to be to see the editor at work. However, these scripts do show you some of the infrastructure needed to move from example to functional application. I wanted to see how simple I could make the script used to create the editor on screen and came up with this simplified version:

The resulting editor still has some nice functionality. Figure 5 shows a typical view of the output.

Five Free JavaScript Libraries to Add Text Editing to Your Application Fg05

Figure 5

It’s important to remember that the editor shown in Figure 5 is the simplest editor you can create. The main advantages of this API are that you can create any sort of editor you want and add features to make desktop users feel right at home. The number of plug-ins, add-ons, and widgets is quite amazing. If you want a calendar added to the editor, there’s a plug-in to add that functionality.

However, YUI2’s disadvantages are also numerous. The learning curve is quite steep; this was the slowest editor to use because of the number of APIs you must download, and the browser support was a little problematic at times. For example, font sizes don’t display correctly in Firefox, but they work just fine with both Internet Explorer and Chrome.

Demo: YUI 2 Rich Text Editor: Examples

Download: YUI 2.9 zip

Documentation: Yahoo! UI Library

Bottom Line

Each of these editors has a special feature that makes it worth considering and it also has some negatives that make it a less than perfect choice. You can find a vast array of editors, some free like these and others that you have to pay for. With so many choices, you should try a few to see which editor works best for your particular needs. After you settle on a particular editor, make sure you take time to configure it for optimal appearance and flexibility so that the user is fully capable of expressing thoughts and ideas as part of the written word.