Встроенный CKeditor интегрирован в редактор GrapesJS

Aug 20 2020

Я работаю в приложении-редакторе, в котором реализован GrapesJS. Его редактор и функция работают нормально. Я интегрировал встроенный CKeditor в редактор GrapesJS, и у него есть несколько проблем.

  1. Отображаются несколько вариантов встроенного редактирования
  2. Иногда параметры редактора расположены неправильно
  3. Основная проблема : встроенные параметры отображаются, но не отражаются в выделенном тексте. Я имею в виду, что мы можем щелкнуть эти встроенные параметры, чтобы отформатировать содержимое редактора, но оно не отражается в редакторе.

Вот несколько написанных кодов:

const editor = grapesjs.init({
    container: '#gjs',
    fromElement: 1,
    height: '100%',
    storageManager: { type: 0 },
    plugins: ['gjs-plugin-ckeditor']
});

editor.setCustomRte({
    enable: function(el, rte) {
        // If already exists just focus
        if (rte) {
            this.focus(el, rte); // implemented later
            return rte;
        }
    
        // CKEditor initialization
        rte = CKEDITOR.inline(el, {
            // Your configurations...
            toolbar: [
                { name: 'styles', items: ['Font', 'FontSize' ] },
                ['Bold', 'Italic', 'Underline', 'Strike'],
                {name: 'paragraph', items : [ 'NumberedList', 'BulletedList']},
                {name: 'links', items: ['Link', 'Unlink']},
                {name: 'colors', items: [ 'TextColor', 'BGColor' ]},
            ],
            uiColor: '#9AB8F3', // Inline editor color
            startupFocus: true,
            extraAllowedContent: '*(*);*{*}', // Allows any class and any inline style
            allowedContent: true, // Disable auto-formatting, class removing, etc.
            enterMode: CKEDITOR.ENTER_BR,
            // extraPlugins: 'sharedspace,justify,colorbutton,panelbutton,font',
            
            // sharedSpaces: {
            //  top: editor.RichTextEditor.getToolbarEl(),
            // }
        });
    
        this.focus(el, rte); // implemented later
        return rte;
    },
    focus(el, rte) {
        // Do nothing if already focused
        if (rte && rte.focusManager.hasFocus) {
            return;
        }
        el.contentEditable = true;
        rte && rte.focus();
    },
    disable(el, rte) {
        el.contentEditable = false;
        if (rte && rte.focusManager)
            rte.focusManager.blur(true);
    }
});

Вот JSFiddle, где вы можете проверить работу и код.

Версия:

grapesjs - 0,16,18

ckeditor - стандартный - 4.14.1

Какое поведение ожидается?

При применении параметров встроенного форматирования из встроенных параметров CKeditor он должен отражаться в выделенном тексте.

Подробно опишите ошибку:

Я интегрировал CKeditor в редактор grapesJS для встроенного редактирования. В настоящее время, когда я выделяю текст для его форматирования, встроенные параметры CKeditor отображаются вместе с несколькими другими параметрами на черной панели инструментов. Я сбит с толку. И главная проблема в том, что даже я использую какие-либо варианты встроенного форматирования, форматирование не отражается в выделенном тексте. Невозможно сделать что-либо из встроенной опции CKeditor, например форматирование текста, список, загрузку изображений, ссылку и т. Д.

Каково текущее поведение?

Основная проблема заключается в том, что даже если я использую какие-либо встроенные параметры, форматирование не отражается в выделенном тексте. Невозможно сделать что-либо из встроенной опции CKeditor, например форматирование текста, список, загрузку изображений, ссылку и т. Д.

Ответы

4 Sinto Sep 02 2020 at 13:42

Как вы видите, я не получил ответа от SO. Я также сообщил об этой проблеме в Github, где я видел ответы на похожие проблемы. Через несколько дней я получил ответ, и это сработало для меня. Так что я хочу поделиться этим ответом со всеми вами, который может быть полезен для кого-то вроде меня.

Моя первая проблема: отображаются несколько вариантов встроенного редактирования

GrapesJS CKEditor плагин уже регистрирует CKEditor как обычай RTE, поэтому вызов editor.setCustomRteна самом деле установить его в два раза.

Я снял editor.setCustomRteблок, и он работал нормально. Если вы хотите предоставить параметры CKEditor, это следует сделать на pluginsOptsуровне, показанном здесь .

Вот моя вторая проблема: иногда параметры редактора расположены неправильно

Это тоже было исправлено после снятия editor.setCustomRteблока.

И последняя и основная проблема, с которой я столкнулся при интеграции: встроенное форматирование, не отражающееся в выделенном тексте.

Плагин GrapesJS CKEditor зависит от версии Standard-All CKEditor , а не от стандартной версии CKEditor . Использоватьhttps://cdn.ckeditor.com/4.14.1/standard-all/ckeditor.js это исправит.

Вот рабочая скрипка, которую вы можете использовать для интеграции Inline CKEditor с GrapesJS

Дополнительное примечание : я столкнулся с другой проблемой после удаления editor.setCustomRteблока - это было исправлением моей первой проблемы. Это выглядит как:

ckeditor.js:270 Uncaught Error: [CKEDITOR.resourceManager.load] Resource name "sharedspace" was not found at "https://cdn.ckeditor.com/4.14.1/standard/plugins/sharedspace/plugin.js?t=K5H9".
    at CKEDITOR.resourceManager.<anonymous> (ckeditor.js:270)
    at e (ckeditor.js:265)
    at Array.x (ckeditor.js:265)
    at w (ckeditor.js:265)
    at HTMLScriptElement.CKEDITOR.env.ie.e.$.onerror (ckeditor.js:266)

Если кто-то из вас столкнулся с подобной ошибкой, обратите внимание, что это связано с типом / версией CKEditor, который вы используете. Я использовал стандартную версию CKEditor, и в этом была проблема. После изменения этой версии на Standard-All CKEditor проблема была решена.

Grapedrop - это сайт, на котором вы можете создать учетную запись и проверить почти все свойства GrapesJS.

Вот дополнительный список плагинов, используемых в CKEditor:

dialogui,dialog,a11yhelp,dialogadvtab,basicstyles,bidi,blockquote,
notification,button,toolbar,clipboard,panelbutton,panel,floatpanel,
colorbutton,colordialog,templates,menu,contextmenu,copyformatting,div,
resize,elementspath,enterkey,entities,exportpdf,popup,filetools,
filebrowser,find,fakeobjects,flash,floatingspace,listblock,richcombo,font,
forms,format,horizontalrule,htmlwriter,iframe,wysiwygarea,image,indent,
indentblock,indentlist,smiley,justify,menubutton,language,link,list,
liststyle,magicline,maximize,newpage,pagebreak,pastetext,pastetools,
pastefromgdocs,pastefromword,preview,print,removeformat,save,selectall,
showblocks,showborders,sourcearea,specialchar,scayt,stylescombo,tab,table,
tabletools,tableselection,undo,lineutils,widgetselection,widget,
notificationaggregator,uploadwidget,uploadimage,wsc

CKEditor Встроенная настраиваемая опция панели инструментов, добавляемая по вашему желанию