History

Documentation

Install

1 <link rel="stylesheet" href="css/smoothness/jquery-ui-1.8.7.custom.css" type="text/css" media="screen" charset="utf-8">
2 <link rel="stylesheet" href="css/elrte.min.css"                         type="text/css" media="screen" charset="utf-8">
3 
4 <script src="js/jquery-1.4.4.min.js"           type="text/javascript" charset="utf-8"></script>
5 <script src="js/jquery-ui-1.8.7.custom.min.js" type="text/javascript" charset="utf-8"></script>
6 <script src="js/elrte.min.js"                  type="text/javascript" charset="utf-8"></script>
7 <script src="js/i18n/elrte.ru.js"              type="text/javascript" charset="utf-8"></script>

If you are not using full jQuery UI library, than make sure your custom version includes dialog and tabs components.

 1 <script type="text/javascript" charset="utf-8">
 2     $().ready(function() {
 3         var opts = {
 4             lang         : 'ru',   // set your language
 5             styleWithCSS : false,
 6             height       : 400,
 7             toolbar      : 'maxi'
 8         };
 9         // create editor
10         $('#our-element').elrte(opts);
11 
12         // or this way
13         // var editor = new elRTE(document.getElementById('our-element'), opts);
14     });
15 </script>

#our-element - id of element where editor will be created, this can textarea or any HTML element that can contain text (will be replaced with textarea on form submit)

Options

Option Type Description
doctype String DocType of editor window (iframe). Default - <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
cssClass String CSS class for editor
cssfiles Array Array of css files which will be included in editor (iframe)
absoluteURLs Boolean Make image URLs absolute
allowSource Boolean Allow edit in HTML
lang String Interface language (requires inclusion of language file), default - English
styleWithCSS Boolean If true - text will be formated using span-tag with style attribute, else - semantic tags like strong, em and other
height Number Height of editor window in pixels
width Number Width of editor window in pixels
fmAllow Boolean Allow use of file manager
fmOpen Function(callback) Function which will be called to open file manager. Argument callback - function which editor passes to file manager on open. File manager must call this function with using URL of selected file as argument
toolbar String Toolbar to use

Toolbar

Next toolbars are predefined:
  • tiny: only buttons to change text style (bold, italic, underline, strike, subscript, superscript)
  • compact: the same as tiny + save, undo/redo, text alignment, list, link, fullscreen
  • normal: compact + copy/paste, colors, paddings, block-elemet, images
  • complete: normal + text size, style and font formating
  • maxi: complete + tables

Custom toolbar

You can customize your toolbar. Toolbar contains panels and panels contains buttons. For list of available toolbars/panels/buttons see src/elrte/js/elRTE.options.js file

Example:

 1 elRTE.prototype.options.panels.web2pyPanel = [
 2     'bold', 'italic', 'underline', 'forecolor', 'justifyleft', 'justifyright',
 3     'justifycenter', 'justifyfull', 'formatblock', 'insertorderedlist', 'insertunorderedlist',
 4     'link', 'image', 'flash'
 5 ];
 6 elRTE.prototype.options.toolbars.web2pyToolbar = ['web2pyPanel', 'tables'];
 7 var opts = {
 8     toolbar  : 'web2pyToolbar',
 9     /* ...snip... */
10 }
11 var rte = jQuery('#editor').elrte(opts);

With example above you will get such toolbar:

elrte-custom-toolbar.png (6.4 kB) Troex Nevelin, 04.07.2010 17:08