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

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

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

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

Рассказать друзьям
author.jpg

Платная консультация по вопросам 2500 руб/час

Прочитали статью и остались вопросы? Меня зовут Валерий и я её автор. С радостью объясню Вам в скайпе все затруднительные моменты, которые остались за рамками статьи!

Подробнее ...

Добавить комментарий


Комментарии