内置在GrapesJS编辑器中的内联CKeditor

问题描述

我正在使用实现GrapesJS的编辑器应用程序。它的编辑器和功能运行正常。我已经将内联CKeditor集成到GrapesJS编辑器中，几乎没有问题。

显示了多个内联编辑选项
有时编辑器选项的位置不正确
主要问题：显示内联选项，但未反映。我的意思是我们可以单击这些内联选项来设置编辑器内容的格式，但不会反映在编辑器中。

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内联选项无法执行任何操作，例如文本格式，列表，图像上传，链接等。

解决方法

如您所见，我没有收到SO的任何回复。我也在Github中报告了此问题，在那里我看到了类似问题的回应。几天后，我得到了回应，对我来说效果很好。因此，我希望与大家分享该回复，这可能对像我这样的其他人有所帮助。

我的第一个问题：正在显示多个内联编辑选项

GrapesJS CKEditor plugin已将CKEditor注册为自定义RTE，因此调用editor.setCustomRte实际上将它设置了两次。

我已删除editor.setCustomRte块，并且工作正常。如果要提供CKEditor选项，则应在pluginsOpts级别完成，如here所示。

这是我的第二个问题：有时编辑器选项的位置不正确

在删除editor.setCustomRte块之后，此问题也得到解决。

而且，集成时我遇到的最后一个主要问题：内联格式未反映在所选文本中

GrapesJS CKEditor插件依赖于Standard-All CKEditor version，而不使用Standard CKEditor version。使用https://cdn.ckeditor.com/4.14.1/standard-all/ckeditor.js即可解决。

这是一个有效的fiddle，您可以将其与GrapesJS进行内联CKEditor集成

附加说明：删除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类型/版本。我正在使用Standard CKEditor version，这就是问题所在。将其更改为Standard-All CKEditor version后，问题已解决。

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 Inline custom toolbar选项随您的意愿添加

ckeditor ckeditor ckeditor grapesjs jquery