Совместное использование CKEditor'а и jQuery

Пятница, 19 марта 2010 19:29

CKEditor - полнофункциональный визуальный (Wysiwyg) HTML редактор страниц. Позволяет редактировать страницу как в режиме Wysiwyg, так и в режиме непосредственного редактирования HTML-кода.

К CMF Cotonti подключается при помощи плагина Cotonti.CKEditor.

В этой статье мы кратко рассмотрим, как можно использовать CKEditor совместно с библиотекой jQuery при разработки плагинов.

Для интеграции редактора с jQuery, в настройках плагина нужно включить опцию «Включить адаптер jQuery?», также понадобится опцию « «ckeditor.js» только для редактирования страниц» перевести в положение «Нет», чтобы CKEditor стал доступным на всех страница сайта (не только при редактировании страниц).

Создание экземпляра редактора

Любой элемент textarea, p или div может быть превращен в текстовый редактор, просто используя метод ckeditor():

$('Textarea.editor').сkeditor();

Также могут быть использованы цепочки вызовов jQuery

$( '.section-x' )
    .find( 'textarea.editor' )
       .ckeditor()
    .end()
    .find( 'a' )
       .addClass( 'mylink' )
    .end();

ckeditor() является основным методом jQuery адаптера. Он принимает два необязательных параметра:

Функция обратного вызова, которая будет выполнена после создания редактора
Настройки конфигурации, спецефичные для создаваемого экземпляра редактора

Настройки конфигурации передаются через простой объект, содержащий свойства, каждое из которых связано с конкретной настройкой редактора.

$('.jquery_ckeditor')
.ckeditor( function() { /* callback code */ }, { skin : 'office2003' } );
.ckeditor( callback2 );

Приведенный пример не создаст 2 редактора, т.к. один экземпляр уже в процессе создания, после завершения первой функции обратного вызова будет запущена вторая. Каждая из этих функций обратного вызова будет выполняться в контексте объекта CKEDITOR.editor (так что «this» будет указывать на экземпляр редактора) и элемент объекта DOM будет им передан в качестве параметра.

Операции над экземпляром редактора

Как только экземпляр редактора создан (после завершения работы функции обратного вызова), можно использовать метод ckeditorGet() для получения доступа к редактору. Например:

var editor = $('.jquery_ckeditor').ckeditorGet();
alert( editor.checkDirty() );

Поскольку операции получения данных, набраных в редакторе, и установка этих данных являются общими операциями, адаптер jQuery позволяет делать это с помощью метода val().

// Читаем данные, набранные пользователем в редакторе.
var data = $( 'textarea.editor' ).val();
// Устанавливаем новый тект в редакторе.
$( 'textarea.editor' ).val( 'my new content' );

Эта возможность может быть отключена установкой настройки CKEDITOR.config.jqueryOverrideVal в значение false, до того как будет загружен адаптер jQuery. Его Cotoni в свою очередь загружает при исполнении хука header.main. Учитывайте эту особенность при написании плагинов, использующих этот адаптер.

Для элемента textarea редактор автоматически вернет свои данные в форму при отправке. CKEditor также работает с официальным плагином jQuery Form Plugin для Ajax форм. Для взаимодействия с этим плагином не требуется никаких дополнительных доработок.

Обработка событий

CKEditor имеет свою систему событий. Она состоит из четырех основных событий:

instanceReady.ckeditor : возникает в момент завершения создания экземпляра редактора, но до начала выполнения функции обратного вызова
setData.ckeditor : возникает когда данные передаются в редактор
getData.ckeditor : возникает в момент получения данных из редактора
destroy.ckeditor : возникает в момент уничтожения экземпляра редактора. Это событие можно использовать, например для обработки полученных от редактора данных, когда работа с ним завершена или очистки страницы.

Экземпляр редактора всегда передается первым параметром обработчику событий. События setData и getData часто используются самим редактором, так, что использовать их нужно с осторожностью.

События jQuery поддерживают т.н. «bubble up»