Class: MooRTE

This class will make any number of elements editable, and add a 'Rich Text Editing' toolbar with which to edit those elements.

Tutorial/Demo

Implements

  • Options

Syntax

 new MooRTE(options);

Options

  • floating - (boolean: defaults to false) whether the Rich Text Editor (RTE) should be inserted into the DOM, or should float above it.
  • elements - (CSS selectors: defaults to 'textarea .rte') The elements that should be made editable.
  • buttons - (JSON, see below) buttons that should be included in the RTE. See below for options
  • location - (string: defaults to 'elements') Location the RTE should be relative to the element(s) being made editable. Options are:
    • elements - each of the passed in elements will have an RTE applied above it (or below it if floating:true and element is near top of page).
    • pageTop - one RTE will be apllied to the top of the page, and will control all passed in elements.
    • pageBottom - one RTE will be apllied to the bottom of the page, and will control all passed in elements.
    • none - no toolbar will be applied. Passed in elements will be made editable, and RTE shortcuts will still work. (eg. Ctrl+B will make selected text bold.)
    • inline - Each passed in elements will have an RTE applied when it receives focus. The RTE will be removed on blur.
  • skin - (string: defaults to 'Word03') CSS class which will be applied to the RTE. Used to designate skins. The following are included:
    • Word03 - a (feeble) attempt to copy the Word 2003 interface, icons from FreeRTE.
    • rteGrey - an (even more feeble, we need designers!) attempt to copy the OpenWysiwyg interface, icons from OpenWebWare.

Option: buttons

  • Can be passed a JSON object or string of any depth, wherein each member represents an item from the MooRTE.Elements Object.
    In the RTE, the 'values' of each object will be placed inside the corresponding 'key'.
    Note that all elements receive the keyname as a class, and ALL classnames are prepended with "rte". 
    							buttons:{Toolbar:['bold', 'italic']}
							
							// becomes:
  • Quote marks on single words are optional. (Escaped quotes are unsupported.) The following two are identical:
    • 							buttons:"{'Toolbar':['bold', 'italic']}"
							buttons:'{Toolbar:[bold, italic]}'
  • Curly-braces are optional, as long as the structure of the JSON is maintained. The following two are identical:
    • 							buttons:'{Toolbar:[bold, {div:strikethrough}] }'
							buttons:'Toolbar:[bold, div:strikethrough]'
							//See 'examples' for how this works..
  • Classes can be appended to each JSON member with a dot. The element created will match the name before the dot.
    • 							buttons:'div.Menu:[bold.BtnClass, italic.BtnClass]'
							
							// from MooRTE.Element.div, MooRTE.Element.bold, & MooRTE.Element.italic:
  • The default button string is: 'Menu:[Main,File,Insert,save]'

Examples

Change the skin to the 'grey skin', inject an RTE to the top of all textareas and elements with the class 'rte'.

					new MooRTE({skin:'rteGrey'});

Inject an RTE to the top of all divs that have the class "editable".

					new MooRTE({elements:'div.editable'});

Float an RTE above all divs that have the class "editable".

					new MooRTE({elements:'div.editable', floating:true});

Add a toolbar to the top of the page, which will control all divs".

					new MooRTE({elements:'div', location:'pageTop'});

Upon focus, all divs on page will receive an RTE positioned above it.

					new MooRTE({elements:'div', location:'inline', floating:true});

MooRTE Property: activeField

The element that was most recently brought into focus.

Syntax

 MooRTE.activeField

Returns

  • (element) - reference to the field that was last brought into focus.

MooRTE Property: activeBtn

Syntax

 MooRTE.activeBtn

Returns

  • (element) - reference to the field that was last brought into focus.

MooRTE Property: activeRTE

Syntax

 MooRTE.activeRTE

Returns

  • (element) - reference to the field that was last brought into focus.

Native: Element

Element Method: moorte

Calls the MooRTE method on the specified element.

Syntax

 myElement.moorte(action, options);

Arguments

  • action (string, optional: defaults to 'create'):
    • 'create' - add RTE to element and make it editable. Restores the RTE if hidden or removed. Accepts all options of class constructor.
    • 'destroy' - completely destroy RTE associated with element and make element uneditable (or return it to textarea, etc.)
    • 'remove' - remove associated RTE, but store a reference that can be retrieved through 'create'. Element is made uneditable.
    • 'hide' - set display of associated RTE to 'none', and make element uneditable.

Options

  • MooRTE Class options

Returns

  • (object) - reference to the field that has been extended.