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'; }; |
Если плагин все таки не появляется на панели инструментов редактора, то взможно вы забыли почистить кеш.
Желаю удачи, пишите свои плагины, выкладывайте их на официальном сайте редактора, и меняйте мир к лучшему.
Комментарии
и даже тут у меня не получилось сделать вывод [minibasket] =(
Даже то что в описании все сделал не чего не менял, странно...
Что то делаю не так и не пойму что. Как его прописать..
А как сделать кнопку для вставки текста: "Привет мир!"
Спасибо!
Нашел такой вариант:
(function()
{
CKEDITOR.plugins.add( 'newplugin',{init: function( editor )
{
editor.addCommand( 'newplugin',{exec : function( editor )
{
editor.insertHtml( 'ла ла ла'); }});
editor.ui.addButton && editor.ui.addButton( 'newplugin',{label:'Insert newplugin',command:'newplugin',icon:this.path + 'newplugin.png'});}});})
Текст вставляет отлично. Но проблема...у меня еще подключен другой плагин mediaembed.
CKEDITOR.editorConfig = function( config ) {
config.extraPlugins = "mediaembed";
config.extraPlugins = "newplugin";
};
Парадокс в том, что в верхнем конфиге ckeditor у меня будет работать newplugin а mediaembed не будет видна на тулбаре.
Если поставить так:
CKEDITOR.editorConfig = function( config ) {
config.extraPlugins = "newplugin";
config.extraPlugins = "mediaembed";
};
то будет наоборот, mediaembed будет показан на тулбаре а newplugin исчезнит. Что за колдовство?
В таком варианте config.extraPlugins = "mediaembed, newplugin"; редактор вобще исчезает.
Практически во всех плагинах не прописана ссылка к картинке кнопки.