elRTE

{{>toc}}

h1. Документация

h2. Установка

<pre><code class="html">

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

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

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

<script src="js/jquery-ui-1.8.7.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>

Если вы не используете в своем проекте полную библиотеку jQuery UI, то можно собрать _custom_ версию jQuery UI, включающую только компоненты *dialog* и *tabs*.

<pre><code class="html">

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

	$().ready(function() {

		var opts = {

			lang         : 'ru',   // set your language

			styleWithCSS : false,

			height       : 400,

			toolbar      : 'maxi'

		};

		// create editor

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

		// or this way

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

	});

</script>

</code></pre>

#our-element - id элемента, на котором будет создан редактор, может быть textarea или любым HTML элементом, содержащем текст (будет заменен на textarea перед отправкой формы)

h2. Опции

|_.Параметр|_.Тип|_.Описание|

|doctype|String|DocType окна редактора (iframe). По умолчанию - *HTML 4.01 Transitional*|

|cssClass|String|CSS Класс для редактора|

|cssfiles|Array|Массив css файлов, подключаемых в окно редактора (iframe)|

|absoluteURLs|Boolean|Приводить адреса ссылок и изображений к абсолютным|

|allowSource|Boolean|Разрешает редактирование HTML|

|lang|String|Язык интерфейса (требует подключения языковых файлов), если не задан от английский|

|styleWithCSS|Boolean|Если true - текст будет оформляться тегами span с аттрибутом style, в противном случае - семантическими тегами strong, em и тд|

|height|Number|Высота окна редактора в пикселях|

|width|Number|Ширина окна редактора в пикселях|

|fmAllow|Boolean|Разрешить использование файлового менеджера|

|fmOpen|Function(callback)|Функция, которая будет вызвана, чтобы открыть файловый менеджер. Аргумент _callback_ - функция, которую редактор передает файловому менеджеру при открытии. Файловый менеджер должен вызвать эту функцию, передав ей url выбранного файла|

|toolbar|String|Имя используемый тулбар (панель инструментов)|

h3. Тулбар (панель инструментов)

Определены следующие тулбары:

* *tiny*: только кнопки изменения стиля текста (жирный, наклонный, подчеркнутый, перечеркнутый, subscript, superscript)

* *compact*: тоже, что и _tiny_ + сохранить, отмена/повтор, выравнивание, списки, ссылки, полноэкранный режим

* *normal*: _compact_ + копировать/вставить, цвета, отступы, элементы, изображения

* *complete*: _normal_ + форматирование, размер и стиль шрифта

* *maxi*: _complete_ + таблицы

h3. Настройка тулбара

Вы можете создать свой тулбар. _Тулбар (toolbar)_ состорит из _панелей (panels)_ , панели состоят из _кнопок (buttons)_. Список всех доступных тулбаров/панелей/кнопок смотрите по ссылке source:src/elrte/js/elRTE.options.js@3e0bf28d9da648d024351330d850e038ccbfb920

Пример:

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

Приведённый выше пример, создаст вот такой тулбар:

!http://elrte.org/redmine/attachments/download/117!