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 лента комментариев этой записи