HTTPS SSH

edd

Плагин jQuery, который реализует функциональность редактора текста.

Горячие клавиши

Плагин позволяет использовать клавиши клавиатуры для манипуляций над редактируемым текстом. Для этого он определяет следующие горячие клавиши:

  • tab отступ.
  • shift + tab удалить отступ.
  • ctrl + l выровнять по левому краю.
  • ctrl + e выровнять по центру.
  • ctrl + r выровнять по правому краю.
  • ctrl + j выровнять по ширине.
  • ctrl + b полужирный текст.
  • ctrl + i наклонный текст.
  • ctrl + u подчеркнутый текст.
  • ctrl + t перечеркнутый текст.
  • ctrl + up верхний индекс.
  • ctrl + down нижний индекс.
  • ctrl + h список.
  • ctrl + k пронумерованный список.
  • ctrl + m удалить форматирование.
  • ctrl + s сохранить введенный текст на сервере.
  • f9 переключить на исходный код или обратно.

Глобальные параметры

Плагин определяет несколько глобальных параметров, которые доступны ч.з. объект $.edd.

  • $.edd.commands объект содержащий представления кнопок панели редактора и реализацию их поведения.
  • $.edd.ctxmenus объект содержащий реализацю выпадающих меню.
  • $.edd.shortcuts объект содержащий объявления стандартных горячих клавиш.
  • $.edd.buttons массив имен кнопок, которые будут выведены на панель интсрументов.
  • $.edd.fonts массив шрифтов, доступных в выпадающем меню кнопки выбора шрифта.
  • $.edd.colors массив цветов, доступных в выпадающем меню кнопки выбора цвета текста и фона.
  • $.edd.tags массив разрешенных тегов.
  • $.edd.emptyTags массив тегов, которые могут быть пустыми.
  • $.edd.messages объект, содержащий локализованные строки текста используемые в интерфейсе редактора.

Значения параметров можно расширять.

Параметры

Метод $.edd() принимает следующие параметры:

  • textarea текстовое поле формы типа textarea.
  • options параметры плагина:
    • shortcuts объект содержащий объявления горячих клавиш.
    • buttons массив имен кнопок, которые будут выведены на панель.
    • fonts массив шрифтов, доступных в выпадающем меню кнопки выбора шрифта.
    • colors массив цветов, доступных в выпадающем меню кнопки выбора цвета текста и фона.
    • tags массив разрешенных тегов.
    • emptyTags массив тегов, которые могут быть пустыми.
    • lang язык интерфейса редактора.
    • direction направление текста (ltr — слева направо; rtl — справа налево).
    • resize позволять изменение размеры окна редатора?
    • resizeScale множитель увеличивающий скорость изменения размера окна редактора (по умолчанию 1).
    • cleanup очищать HTML редактора от мусора после операции вставки?
    • autosave количество секунд перед автоматическим сохранием введенного текста (по умолчанию, 300).
    • beautify форматировать результирующий HTML код?
    • savingUrl адрес скрипта отвечающего за сохранение введенного текста.
    • uploadingUrl адрес скрипта отвечающего за загрузку файлов и изображений.
    • customFields объект, содержащий пользовательские данные, которые будут отправлены серверным скриптам.
    • commands объект содержащий представления кнопок панели редактора и реализацию их поведения.
    • ctxmenus объект содержащий реализацю выпадающих меню.

Свойства объекта редактора

Объект редактора, возвращаемый методом $.edd(), содержит следующие свойства:

  • container контейнер редактора, содержащий панель инструментов и поле редактора.
  • options: настройки данного экземпляра редактора.
  • toolbar: панель инструментов редактора.
  • editor: поле ввода редактора.
  • textarea: оригинальное поле ввода.
  • commands: тоже самое что и $.edd.commands только для данного экземпляра редактора.
  • beautifier: объект отвечающий за разметку HTML кода в оригинальном редакторе.
  • dropdown: объект выпадающего меню.
  • modal: объект модального окна.

Описание API функций

Плагин предоставляет функции для вызова пользователем. Эти функции доступны ч.з. объект, который возвращает функция $.edd.

/**
 * Возвращает объект кнопки находящейся на панели инструментов.
 * @param name имя кнопки.
 * @return $(node) | undefined
 */

function button (name);

/**
 * Узел находится внутри редактора?
 * @param node узел редактора.
 * @return bool
 */

function contains (node);

/**
 * Возвращает объект текущего выделенного в редакторе фрагмента текста.
 * В объект добавляется информация о позиции начала и конца выделенного фрагмента.
 * @return Range {selection: { begin: number, end: number }}
 */

function currentRange ();

/**
 * Выделяет текст в редакторе и возвращает объект выделенного фрагмента.
 * @param begin позиция начала выделеяемого фрагмента текста.
 * @param end позиция конца.
 * @return Selection
 */

function select (begin, end);

/**
 * Сохраняет текущий выделенный фрагмент текста для его последующего восстановнения
 * методом restoreSelection(). Возвращает DOM узел переданный в качестве аргумента,
 * если он находится внутри редактора, иначе возвращает пустой jQuery объект.
 * @param node DOM узел редактора.
 * @return $(node)
 */

function storeSelection (node);

/**
 * Восстанавливает сохраненный ранее выделенный фрагмент текста.
 */

function restoreSelection ();

/**
 * Выделяет содержимое узла внутри редактора и возвращает объект выделенного фрагмента.
 * Возбуждает исключение, если узел не находится внутри редактора.
 * @param node узел редактора.
 * @return Selection
 */

function selectNode (node);

/**
 * Перемещает каретку в конец узла редактора.
 * @param node узел редактора.
 * @param begin установить курсор в начале узла?
 */

function gotoNode (node, begin);

/**
 * Устанавливает каретку в указанной позиции.
 * @param position позиция внутри редактора.
 */

function gotoPosition (position);

/**
 * Выполняет указанную команду, которая присутсвует в объекте команд $.edd.commands.
 * @param name имя команды.
 */

function exec (name);

/**
 * Устанавливает HTML текст редактора.
 * @param html текст HTML.
 */

function html (html);

/**
 * Сохраняет содержимое редактора на сервере.
 * Для работы необходимо определить параметр savingUrl.
 * Работает асинхронно, т.к. использует $.ajax().
 * @return deferred
 */

function save ();

/**
 * Устанавливает размеры окна редактора.
 * @param height высота окна (px).
 * @param width ширина окна (px).
 */

function size (height, width);

/**
 * Обновляет значение поля ввода.
 */

function update ();

/**
 * Очищает содержимое поля ввода редактора от «мусора».
 */

function clean ();

/**
 * Возвращает локализованный текст из глобального параметра $.edd.messages.
 * Если текст не локализован, то возвращает текст на английском.
 * @param en текст на английском.
 * @return String
 */

function t (en);

Описание обработчиков событий

/**
 * Обработка события «после инициализации.
 */

function afterInit ();

/**
 * Обработка события «после загрузки файла/изображения».
 * @param files массив объектов загруженных файлов или изображений.
 */

function afterUpload (files);

/**
 * Обработка события «после переключения на редактор/исходный код».
 */

function afterToggle ();

/**
 * Обработка события «после сохранения введенного текста».
 */

function afterSave ();

/**
 * Обработка события «после обновления значения поля ввода».
 */

function afterUpdate ();

/**
 * Обработка события «после вставки текста в редактор».
 * @param orig оригинальное значение, до вставки.
 */

function afterPaste (orig);

Пример использования

Пример использования находится в файле example\index.html.