Protoplasm

4.1

Rating: 4.1/5 (56 votes)

Rich Text Editor

An in-browser WYSIWYG rich text editor. Compared to the popular HTML editors out this, RTE is lightweight & easy to use, and doesn't try to be a word processor replacement. It can be created/destroyed on the fly, to function in an constantly changing page environment.

Demo

Source Example

<html> <head> <script language="javascript" src="protoplasm.js"></script> <script language="javascript"> Protoplasm.use('rte').transform('textarea.richtext'); </script> </head> <body> <textarea name="content" class="richtext" rows="10" cols="60"> Rich text content here </textarea> </body> </html>

Usage

To create rich text editors out of all elements that match a given CSS rule:

Protoplasm.use('rte').transform(selector[, options]);

Parameters:

Parameter

Required

Description

selector

yes

A CSS rule matching the textareas to turn into text editors

options

An object (hash) containing name/value pairs of additional options.

Available options:

includePath	The path to the image icons. Defaults to "images/" in the same directory as the script.
fileLister	A reference to a function that is responsible for providing filesystem access (see File Chooser)

Advanced Usage

If you want more control over creation and destruction of the text editor, you can instantiate it manually instead of using Protoplasm.transform.

In your <head> section:

Protoplasm.use('rte');

To create a rich text editor:

var editor = new Control.RTE(element[, options]);

To destroy the rich text editor:

editor.destroy();