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

Question

我在一个实现了 GrapesJS 的编辑器应用程序中工作。它的编辑器和功能运行良好。我已经将内联 CKeditor 集成到 GrapesJS 编辑器中，它几乎没有问题。

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

在这里分享我写的一些代码：

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，您可以在这里检查工作和代码。

版本：

葡萄-0.16.18

ckeditor - 标准 - 4.14.1

预期的行为是什么？

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

详细描述错误：

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

当前的行为是什么？

主要问题是即使我使用任何内联选项，格式也没有反映在 selected 文本中。无法通过 CKeditor 内联选项执行任何操作，例如文本格式设置、列表、图像上传、link 等。

Answer 1

如您所见，我没有收到 SO 的任何回复。我也在 Github 中报告了这个问题，在那里我看到了类似问题的回复。几天后，我收到了回复，对我来说效果很好。所以我想和大家分享这个回复，这可能对像我这样的人有帮助。

我的第一期：显示多个内联编辑选项

The GrapesJS CKEditor plugin already registers CKEditor as a custom RTE, so calling editor.setCustomRte is actually setting it up twice.

我已经删除了 editor.setCustomRte 块并且它工作正常。如果你想提供 CKEditor 选项，这应该在 pluginsOpts 级别完成，如图 here.

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

这在删除 editor.setCustomRte 块后也已修复。

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

The GrapesJS CKEditor plugin is dependent on the Standard-All CKEditor version, not using the Standard CKEditor version. Use https://cdn.ckeditor.com/4.14.1/standard-all/ckeditor.js it will fix.

这是一个有效的 fiddle，您可以参考它以了解内联 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 type/version。我用的是Standard CKEditor version & that was the issue. After changing that to 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 Inline standard-all 版本仅适用于少数 HTML 标签行 <div>、<p>、<h1>-<h6>。对于 strong、i、span 等元素，此内联编辑器不会弹出。这是 above-mentioned 问题的。

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

Inline CKeditor integrated in GrapesJS editor

jquery

ckeditor

grapesjs