集成在 GrapesJS 编辑器中的内联 CKeditor

Question

我在一个实现了 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，您可以在其中检查工作和代码。

版本：

葡萄js - 0.16.18

ckeditor - 标准 - 4.14.1

什么是预期行为？

在应用内联 CKeditor 选项中的内联格式选项时，它应该反映在所选文本中。

详细描述错误：

我已将 CKeditor 集成到葡萄编辑器中以进行内联编辑。目前，当我选择文本对其进行格式化时，内联 CKeditor 选项与黑色工具栏中的其他几个选项一起显示。我对此很困惑。主要问题是，即使我使用任何内联格式选项，格式也不会反映在所选文本中。无法从 CKeditor 内联选项中执行任何操作，例如文本格式、列表、图像上传、链接等。

目前的行为是什么？

主要问题是，即使我使用任何内联选项，格式也不会反映在所选文本中。无法从 CKeditor 内联选项中执行任何操作，例如文本格式、列表、图像上传、链接等。

Answer 1

如您所见，我没有得到 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 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 内联自定义工具栏选项根据您的意愿添加

更新： CKEditor 内联标准-所有版本仅适用于少数 HTML 标签 line <div>, <p>, <h1>- <h6>。这个行内编辑器无法弹出对于类似的元件strong，i，span，等这里是一个解决方案，以上面提到的问题。