ckeditor - это великолепный wysiwyg редактор для вашего сайта. По моему скромному мнению, он лучший в своем роде, к тому же постоянно развивается. Обилие плагинов «из под коробки», и легкость их написания также играют на руки редактору. Я сам написал несколько полезных дополнений.
Последняя 4-ая версия вообще достойна отдельной статьи. На официальном сайте можно собрать свою версию редактора, с необходимым набором плагинов.
В этой статье я расскажу, как написать свой простейший плагин вставки произвольного текста.
Будем вставлять текущую дату и время.
Создаем папку с названием нашего плагина: ckeditor/plugins/addtimestamp/ ,в ней создаем файл plugin.js с таким содержанием
CKEDITOR.plugins.add('addtimestamp',{ init: function(editor){ var cmd = editor.addCommand('addtimestamp', { exec:function(editor){ editor.insertHtml( new Date() ); // собственно сама работа плагина } }); cmd.modes = { wysiwyg : 1, source: 1 };// плагин будет работать и в режиме wysiwyg и в режиме исходного текста editor.ui.addButton('addtimestamp',{ label: 'Добавить текущую дату и время', icon:this.path+'/addtimestamp.png', // иконка command: 'addtimestamp' }); } });
также в эту папку необходимо положить addtimestamp.png - иконка, которая будет отображаться на панели. Вот и все, осталось подключить плагин в ckeditor/config.js
Добавляем пару строк в ckeditor/config.js
CKEDITOR.editorConfig = function( config ){ config.extraPlugins = 'addtimestamp'; config.toolbar_Full.push(['addtimestamp']); };
В результате Вы увидите свой плагин в тулбаре вместе с остальными кнопками.
Описанное выше работает для ckeditor версии 3.* Для ckeditor 4-ой версии код и структура плагина отличается. Для начала, иконка плагина лежит в отдельной папке ckeditor/plugins/addtimestamp/icons/addtimestamp.png
файл plugin.js также изменен
CKEDITOR.plugins.add('addtimestamp',{ init: function(editor){ var cmd = editor.addCommand('addtimestamp', { exec:function(editor){ editor.insertHtml( (new Date()).toString() ); // собственно сама работа плагина } }); cmd.modes = { wysiwyg : 1, source: 1 };// плагин будет работать и в режиме wysiwyg и в режиме исходного текста editor.ui.addButton('addtimestamp',{ label: 'Добавить текущую дату и время', command: 'addtimestamp', toolbar: 'about' }); }, icons:'addtimestamp', // иконка });
Отличий всего два:
- иконка кнопки указывается отдельно,
- при выполнении команды ui.addButton указываем в какой тулбар разместить нашу кнопку. Полный список тулбаров здесь
Так как Вы уже указали в самом плагине, где ему размещаться, то в config.js строка config.toolbar_Full.push(['addtimestamp']); больше не нужна, т.е. его содержание примет вид
CKEDITOR.editorConfig = function( config ){ config.extraPlugins = 'addtimestamp'; };
Если плагин все таки не появляется на панели инструментов редактора, то взможно вы забыли почистить кеш.
Желаю удачи, пишите свои плагины, выкладывайте их на официальном сайте редактора, и меняйте мир к лучшему.
Комментарии
RSS лента комментариев этой записи