History

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

Установка

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>

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

 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 элемента, на котором будет создан редактор, может быть textarea или любым HTML элементом, содержащем текст (будет заменен на textarea перед отправкой формы)

Опции

Параметр Тип Описание
doctype String DocType окна редактора (iframe). По умолчанию - <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
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 Имя используемый тулбар (панель инструментов)

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

Определены следующие тулбары:
  • tiny: только кнопки изменения стиля текста (жирный, наклонный, подчеркнутый, перечеркнутый, subscript, superscript)
  • compact: тоже, что и tiny + сохранить, отмена/повтор, выравнивание, списки, ссылки, полноэкранный режим
  • normal: compact + копировать/вставить, цвета, отступы, элементы, изображения
  • complete: normal + форматирование, размер и стиль шрифта
  • maxi: complete + таблицы

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

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

Пример:

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

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