elRTE

{{>toc}}

h1. Documentation

h2. Install

<pre><code class="html">

<link rel="stylesheet" href="js/ui-themes/smoothness/jquery-ui-1.8.4.custom.css" type="text/css" media="screen" charset="utf-8">

<link rel="stylesheet" href="css/elrte.full.css" type="text/css" media="screen" charset="utf-8">

<script src="js/jquery-1.4.2.min.js"           type="text/javascript" charset="utf-8"></script>

<script src="js/jquery-ui-1.8.4.custom.min.js" type="text/javascript" charset="utf-8"></script>

<script src="js/elrte.min.js" type="text/javascript" charset="utf-8"></script>

<script src="js/i18n/elrte.ru.js" type="text/javascript" charset="utf-8"></script>

</code></pre>

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

<pre><code class="html">

<script type="text/javascript" charset="utf-8">

	$().ready(function() {

		var opts = {

			lang : 'ru',

			styleWithCss : false,

			height  : 400,

			toolbar : 'maxi',

			fmAllow  : true,

			fmOpen   : function(callback) {

				$('<div />').elfinder({

					url : 'connector/connector.php',

					lang : 'en',

					dialog : { width : 900, modal : true },

					editorCallback : callback

				})

			}

		};

		// create editor

		$('#our-element').elrte(opts);

		// or this way

		// var editor = new elRTE(document.getElementById('our-element'), opts);

	});

</script>

</code></pre>

#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)

h2. Options

|_.Option|_.Type|_.Description|

|doctype|String|DocType of editor window (iframe). Default - *HTML 4.01 Transitional*|

|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|

|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|

h3. 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

h3. Custom toolbar

You can customize your toolbar. _Toolbar_ contains _panels_ and panels contains _buttons_. For list of available toolbars/panels/buttons see source:src/elrte/js/elRTE.options.js@a3abae1537eb5ff4b733e19580e1b6eebbad1599

Example:

<pre><code class="javascript">

elRTE.prototype.options.panels.web2pyPanel = [

	'bold', 'italic', 'underline', 'forecolor', 'justifyleft', 'justifyright',

	'justifycenter', 'justifyfull', 'formatblock', 'insertorderedlist', 'insertunorderedlist',

	'link', 'image', 'flash'

];

elRTE.prototype.options.toolbars.web2pyToolbar = ['web2pyPanel', 'tables'];

var opts = {

	toolbar  : 'web2pyToolbar',

	/* ...snip... */

}

var rte = jQuery('#editor').elrte(opts);

</code></pre>

With example above you will get such toolbar:

!elrte-custom-toolbar.png!