Заметки по CKEditor¶

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

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

Мы добавили пару кнопок '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); который также вызывается при щелчке мыши мимо редактора и ряде других действий. В основном коде был метод вида

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

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

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();
               }
}

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

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

elem - узел для которого вызывается редактор, у нас выбирался по классу при двойном клике на нем
$('.editable').live('dblclick'
Единственное что мы по умолчанию отключали inline редактирование и отмечали что его вызывать на тексте не нужно через параметр elem а
contenteditable="false".
Также в начале скрипта указывали
CKEDITOR.disableAutoInline = true;

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

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