1. Dmitry Kadochnikov
  2. edd

Overview

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.