anthonyt / moorte

Mootools Wysiwyg/NAWTE Rich Text Editor - small, extensible!

MooRTE

Rich Text Editor Framework for Mootools.

Tiny, flexible, and does not use a IFrame.

Official Group

Dependencies:

The basic buttons (bold, italic, etc) only require mootools-core.

Many other buttons buttons rely on 3rd party scripts. [The popup in the "hyperlink" button uses StickyWin, the "Upload Button" uses FancyUpload, etc.] They require Depender.js, which is used to load in each of these third-party scripts as needed. See the Depender docs for the correct setup of these docs. The Demo folder of the download is setup correctly.

How to use

Basic usage:

$('myElement').moorte(options);

Alternative usage:

// a group of elements
$$('.myElements').moorte(options);
// single, group, or to apply to the page.
var myRTE = new MooRTE(options);

Options

• buttons: 'div.Toolbar':['bold','italic','underline] "buttons" can refer to anything in the MooRTE.Elements object. It will accept a JSON Object of any complexity, and is very loose in the definition. The Element object can be extended, see on.
• skin: 'Word03'
  • This is a classname added to the MooRTE Element.
  • To define your own skin, modify the existing styles or add another
  • location: 'elements'
  • 'elements' - aplied above each passed in element.
  • 'inline' - Each of the passed in elements will assume an RTE when focused. The RTE will be removed when the element loses focus.
  • 'pageTop' - One RTE toolbar will be applied to the top of the page and will control all passed in elements.
  • 'PageBottom' - One RTE toolbar will be applied to the bottom of the page and will control all passed in elements.
  • 'none' - No visible toolbar will be applied, but keyboard shortcuts will still work.
• floating: false
  • Should the RTE be inserted into the element (affecting page layout) or should it float above it.
• elements: 'textarea, .rte' - What elements should the RTE extend.
  • Only applicable when called with the new keyword [var mrte = new MooRTE({elements:'textarea'}) ])
• mooRTEopts: { path: 'js/sources.json' } - The path to use with the Depender resource loader. See Customization section below.

Customization:

MooRTE.Path

This is the path to your sources.json file.
By default, is "js/sources.json"

If you have your own folder structure, modify this path, or no plugins will work!

MooRTE.Path = 'Javascripts/2010/mootools/classes/experiments/moorte/scripts.json';
$('myEl').moorte();`

Note that you can also set a custom path in the options dict. (See above)

MooRTE.Elements

The MooRTE.Elements object can be extended.

To create a button (some random options, all are optional) MooRTE.Elements.extend({ myButton:{ img: 'path/to/myImg.jpg', onLoad: function(){alert("button loaded")}, onClick: function(){alert("Hello World!")}}, source: function(){alert("3..2...1...boom")} }) });

If your function relies on a 3rd party script, it should be included in the onLoad event as follows: 'scripts' may either be a path to your script, or the class name used by Depender (if you know how to set that up). MooRTE.Elements.extend({ myButton:{ onLoad: function(){ MooRTE.Utilities.assetLoader({ scripts: 'StickyWinModalUI', onComplete: function(){ alert("done") } }) } } });

To define a custom toolbar:

• If the toolbar must show when a button on the menu is clicked, the button should have an onClick event.

• If the toolbar should should also show when menu button is loaded, the onLoad should reference the onClick.

• The toolbar should be passed in as an array where the first item is 'group' and the buttons object is the second.

  var myToolbar = {Toolbar:['bold','underline','italic']}; MooRTE.Elements.extend({ myMenuEntry:{ text:'edit', onLoad: 'onClick', onClick:['group',myToolbar] } });

Contact:

Due to a GITHUB issue, the cached version of this project was a broken one.
Please redownload and test - this version should work. If you have issues, please comment on the Google group (Sign up required to prevent spam bots.) http://groups.google.com/group/moorte or email me at siteroller - the at dingbat - gmail.

There are many more options, see the docs on the site.