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';  
};

Если плагин все таки не появляется на панели инструментов редактора, то взможно вы забыли почистить кеш.

Желаю удачи, пишите свои плагины, выкладывайте их на официальном сайте редактора, и меняйте мир к лучшему.  

Документация 

Оставлять комментарии могут только зарегистрированные пользователи

Комментарии  

Shevchoon
# Shevchoon 27.02.2013 07:12
Спасибо!

и даже тут у меня не получилось сделать вывод [minibasket] =(

Даже то что в описании все сделал не чего не менял, странно...

Что то делаю не так и не пойму что. Как его прописать..
Leroy
# Leroy 27.02.2013 13:25
обновил статью
Serg
# Serg 15.04.2013 22:03
Здравствуйте!

А как сделать кнопку для вставки текста: "Привет мир!"

Спасибо!
Leroy
# Leroy 15.04.2013 22:34
Все тоже что описано выше, только new Date() заменяем на "Привет мир!", элементарно
Serg
# Serg 16.04.2013 16:41
С вашим вариантом что-то не получилось....

Нашел такой вариант:

(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"; редактор вобще исчезает.
Leroy
# Leroy 16.04.2013 16:44
config.extraPlugins =­"newplugin,mediaembed";
Serg
# Serg 16.04.2013 16:47
Заработало вот так: config.extraPlugins = "newplugin,mediaembed";
qawsedrftg
# qawsedrftg 07.08.2013 21:17
Здравствуйте! Кнопка есть, нажимаю на неё и ничего не происходит. В чем может быть причина?
Leroy
# Leroy 08.08.2013 00:17
что показывает консоль ошибок?
Sipth
# Sipth 19.01.2016 23:44
Спасибо большое за эту статью. Я наконец то разобрался чего нехватает плагинам что бы кнопочки появлялись на панели при визуальном редактировании конфигурации...

Практически во всех плагинах не прописана ссылка к картинке кнопки.