Комментарии и цитирование комментариев с CKEditor

В модуле комментариев на данном сайте используется CKEditor, на данный момент он меня устраивает, хоть и не лишен определенных недостатков. 

Цитирование определенных комментариев является необходимым функционалом, если мы хотим организовать некое общение в комментах, чтобы понимать, кто кому и что пишет или отвечает.

Для этого использую такой код

var oComment = {
 
	'quote': function(commentId)
	{
		var oEditor = CKEDITOR.instances.cm_text;
 
    var sStr = '<fieldset><legend>' 
		+ jQuery('.name', jQuery('[data-commentid="' + commentId + '"]')).html() 
		+ '</legend>'
                + jQuery('.text', jQuery('[data-commentid="' + commentId + '"]')).html()
                + '</fieldset>';
 
    oEditor.insertElement(CKEDITOR.dom.element.createFromHtml(sStr, oEditor.document));
    oEditor.insertElement(CKEDITOR.dom.element.createFromHtml('<p>&nbsp;</p>', oEditor.document));
	},
 
	'init': function()
	{
		CKEDITOR.replace('cm_text', {
			'customConfig': '/assets/js/ck-editor-modulecomment.js'
		});
	}
 
};

Разберем, что здесь к чему

INIT

'init': function()
	{
		CKEDITOR.replace('cm_text', {
			'customConfig': '/assets/js/ck-editor-modulecomment.js'
		});
	}

CKEDITOR.replace принимает два параметра,

первый 'cm_text' это ID элемента на странице, на месте которого будет создан редактор, второй - это объект.

У меня объект только с одним параметром, который указывает файл с конфигом именно для этого редактора (в модуле комментов). Это полезно, если у вас несколько разных конфигураций редактора на одной или нескольких страницах. Например, у меня в модуле комммнтов используется редактор с небольшим функционалом (позволяет вставить ссылку, картинку, сделать шрифт жирным или курсивом и т.п), в админской же части используется редактор с полным набором функций. Поэтому удобно иметь разные конфиги для разных редакторов.

Вот содержание конфига

CKEDITOR.editorConfig = function( config ) {
 
	config.toolbarGroups = [
		{ name: 'links' },
		{ name: 'insert' },
		{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
		{ name: 'paragraph',   groups: [ 'list', 'indent'] },
	];
 
	config.removeButtons = 'Anchor,Subscript,Superscript';
 
	config.format_tags = 'p;h1;h2;h3;pre';
 
	config.removeDialogTabs = 'image:advanced;link:advanced';
 
	config.extraPlugins = 'codesnippetgeshi';
	config.codeSnippetGeshi_url = '/action/geshi';
};

Описывать не буду, все есть на оф сайте проекта. Отмечу только, что в последней строке указан урл на контроллер, который отвечает за подсветку синтаксиса кода.

 

QUOTE

'quote': function(commentId)
	{
		var oEditor = CKEDITOR.instances.cm_text;
 
    var sStr = '<fieldset><legend>' 
		+ jQuery('.name', jQuery('[data-commentid="' + commentId + '"]')).html() 
		+ '</legend>'
                + jQuery('.text', jQuery('[data-commentid="' + commentId + '"]')).html()
                + '</fieldset>';
 
    oEditor.insertElement(CKEDITOR.dom.element.createFromHtml(sStr, oEditor.document));
    oEditor.insertElement(CKEDITOR.dom.element.createFromHtml('<p>&nbsp;</p>', oEditor.document));
	}

В этот метод передается только один параметр, это ID комментария на странице, который нужно прицитировать. Это зависит от вашей конкретной реализации, какие параметры передавать, возможно, вы будете сразу текст передавать в метод.

В первой строке вы получаете объект своего редактора по ID элемента (вспомните, именно этот ID мы указывали в методе init()

var oEditor = CKEDITOR.instances.cm_text;

Далее у меня формируется строка (HTML), которую я хочу вставить в редактор, то есть, фактически, получаем так 

var sStr = '<p>Ваш HTML для вставки</p>'

Следующая строка зосдает элемент для CKEDITOR и вставляет в область ввода

oEditor.insertElement(CKEDITOR.dom.element.createFromHtml(sStr, oEditor.document));

Затем я добавляю еще один абзац, чтобы отделить цитату от последующего текста комментария

oEditor.insertElement(CKEDITOR.dom.element.createFromHtml('<p>&nbsp;</p>', oEditor.document));

Вы этого можете не делать, это лишь для моего удобства и удовольствия.

Обратите внимание, что сразу, одновременно, вставить два элемента нельзя!

То есть, вот так сделать не получится

oEditor.insertElement(CKEDITOR.dom.element.createFromHtml(sStr 
+ '<p>more HTML</p>', oEditor.document));

По какой-то причине, честно признаюсь, не знаю по какой, редактор не позволяет вставлять два коренных элемента одновременно. То есть, должен быть один коренной, а все остальные дочерние. По аналогии с XML. Если нужно вставить два элемента, то повторяете процедуру дважды, как у меня показано выше.

 

Сохранение, редактирование и настройку CKEDITOR описывать не буду, слишком там всего много)