Requality

h1. Заметки по CKEditor

CKEditor представляет собой WYSIWYG редактор поставляемый в том числе в виде архива со всеми необходимыми ресурсами. Найти можно по ссылке https://ckeditor.com/

Может функционировать в различных режимах, мы на практике использовали "стандартный" редактор и inline. Стандартный пример последнего можно найти по ссылке https://ckeditor.com/docs/ckeditor5/latest/examples/builds/inline-editor.html

Наша конфигурация несколько отличалась от стандартной. Первое отличие в тулбаре

<pre><code class="javascript">

CKEDITOR.config.toolbar_Requality = [

	{ name: 'document',    items : [ 'Sourcedialog','-','RequalitySave', 'RequalityExit' ] },

	{ name: 'clipboard',   items : [ 'SelectAll', 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },	'/',

	{ name: 'indents', items :['Outdent', 'Indent']},

	{ name: 'basicstyles', items : [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', 'RequalityPre', '-', 'RemoveFormat', '-', 'NumberedList', 'BulletedList' ] },

	{ name: 'links',       items : [ 'SimpleImage', 'Link', 'Unlink', '-', 'Table', 'HorizontalRule', 'SpecialChar' ] },

];

</code>

</pre>

Мы добавили пару кнопок 'RequalitySave', 'RequalityExit' в своем плагине. Первая вызывала сохранение и закрытие редактора вторая просто все закрывала.

Делалось все при помощи плагина в папке plugins/requality/plugin.js

https://forge.ispras.ru/projects/reqdb/repository/requality/revisions/master/entry/jstools/ckeditor/plugins/requality/plugin.js

По сути происходит только вызов onClose(ed); который также вызывается при щелчке мыши мимо редактора и ряде других действий. В основном коде был метод вида

<pre><code class="javascript">

function saveEditor(id/* uuid */) {

	var i=0;

	var arr=[];

	for(var name in CKEDITOR.instances)

	{

		try{

			arr[i++]=CKEDITOR.instances[name];

		}

		catch (ex){printToConsole(ex.name+" "+ex.message+" "+ex.trace);}

	}

	var ed = CKEDITOR.currentInstance;

	if(!ed && ed != null && e.status !="destroyed")

		arr[i++]=CKEDITOR.currentInstance;

	for(var j=0;j<i;j++){

		try{

			var editor = arr[j];

			if(editor.checkDirty())

				editor.execCommand('requalitySave');

			else	

				editor.execCommand('requalityExit');

		}

		catch (ex){printToConsole(ex.name+" "+ex.message+" "+ex.trace);}

	}

}

</code>

</pre>

который и занимался закрытием и вызовом зарегистрированных команд из плагина

Данные при сохранении получались примерно так

<pre><code class="javascript">

editor.on('beforeCommandExec', function(e){

		if (e!=null && e.data.name == 'requalitySave') {

			if(e.editor.status!="ready")

			{

				return false;

			}

			var elem = $(e.editor.element.$);

			var new_data = e.editor.getData();

               }

}

</code>

</pre>

После этого можно используя данные о элементе и полученный из редактора html отправлять его в систему.

Но как производится вызов редактора?

У нас в момент времени существует только один экземпляр редактора хранимый в переменной editor. Есть две разновидности - упрощенный и полнофункицональный

<pre><code class="javascript">

if (simplified) {

		// Simplified version of the editor: no toolbar, no statusbar,

		// special skin without borders

		editor = CKEDITOR.inline( elem.id, {

			bodyClass: 'miniCKE',

			bodyId: 'editor'+elem.id,

			autoUpdateElement:false,

			disableObjectResizing:true,

			language: 'en',

			autoParagraph: false,

			skin: 'simple',

			removePlugins: 'toolbar',

			startupShowBorders: true,

			resize_enabled: false,

	        forcePasteAsPlainText: true,

			toolbarCanCollapse: true,

			extraPlugins: 'requality'+add,

			keystrokes:

				   [

				      [13,                  '']

				   ]

		});

	}

	else {

		editor = CKEDITOR.inline( elem.id, {

			bodyClass: 'normalCKE',

			bodyId: 'editor'+elem.id,

			autoUpdateElement:false,

			disableObjectResizing:true,

			language:'en',

			autoParagraph:false,

			startupShowBorders:true,

			toolbar:"Requality",

			toolbarStartupExpanded:true,

			toolbarCanCollapse:false,

			extraPlugins:'SimpleImage,sourcedialog,requality'+add,

			forcePasteAsPlainText:true

		} );

	}

</code>

</pre>

elem - узел для которого вызывается редактор, у нас выбирался по классу при двойном клике на нем

$('.editable').live('dblclick'

Единственное что мы по умолчанию отключали inline редактирование и отмечали что его вызывать на тексте не нужно через параметр elem а

contenteditable="false".

Также в начале скрипта указывали 

CKEDITOR.disableAutoInline = true;

Кстати на закрытие также вешался обработчик

<pre><code class="javascript">

editor.onClose = function(e){

       	if(editorJavaDialog)

			return false;

		var n_html, view;

	     editor.destroy(true);

       f.attr("contenteditable", false);

       f.removeClass("cke_focus");

       f.css("position","");

       return true;

    };

</code>

</pre>