Rich Text Editor
This is a rich text editing control that I created after being frustrated with the existing selection out there. I couldn't find an editor that:
- Could be easily created and destroyed dynamically
- Didn't suffer from feature-bloat
- Looked good
So this control was born. The core code is originally based on the editor by Kevin Roth, but the interface and object design is completely new. Parts of the interface still need improving (the link and table dialogs, for example), but overall it suits my purposes nicely.
Demo
Download
Rich Text Editor is available under the terms of the GNU General Public License.
Source:
- rte.js - the core editor code
- rte-images.zip - the toolbar icon pack
- rte.css - a sample CSS file for customizing the editor
Two other controls are required by the toolbar dialogs:
- Color Picker
- File Chooser (optional, only for server-side image browsing)
Global dependencies for all controls:
- Prototype - an excellent Javascript object library
- Scriptaculous Effects - only effects are required; you do not need the other Scriptaculous libraries
Usage
Constructor:
var rte = new Control.RTE(element, image_dir, options);
Parameters:
- element - The CSS id of the <textarea> element
- image_dir - the directory you unpacked rte-images.zip into
- options - an object with name/value pairs of additional options
Additional Options:
- fileLister - a reference to a function that is responsible for providing filesystem access (see File Chooser)
- Other options currently undocumented
Example:
new Control.RTE('my_textarea', '/images/rte');
Example using server-side image browser:
new Control.RTE('my_textarea', '/images/rte', {fileLister: fileListHandler});