Inline CKeditor integrated in GrapesJS editor

Question

I'm working in an editor application where GrapesJS is implemented. Its editor and feature are working fine. I have integrated inline CKeditor to GrapesJS editor and it has few issues.

1. Multiple inline edit options are showing
2. Sometimes the editor options are not positioned properly
3. Main issue: Inline options are showing but it's not reflecting in the selected text. I mean we can click those inline options to format the editor contents but it is not reflected in the editor.

Here I'm sharing few codes written:

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

Here is JSFiddle where you can check the working & code.

Version:

grapesjs - 0.16.18

ckeditor - standard - 4.14.1

What is the expected behavior?

While applying the inline formatting options from inline CKeditor options, it should reflect in the selected text.

Describe the bug detailed:

I have integrated the CKeditor in the grapesJS editor for inline editing purposes. Currently, when I select text to format it, the inline CKeditor options are displaying along with another few options in a black toolbar. I'm confused about that. And the main issue is that even I use any of the inline formatting options, the formatting is not reflecting in the selected text. Can't do anything from the CKeditor inline option like text formatting, list, image uploads, link, etc..

What is the current behavior?

The main issue is that even I use any of the inline options, the formatting is not reflecting in the selected text. Can't do anything from the CKeditor inline option like text formatting, list, image uploads, link, etc..

Answer 1

As you see I do not get any response from SO. I have also reported this issue in Github where I have seen responses of similar issues. After a few days, I got a response & that worked fine for me. So I wish to share that response with you all, which might be helpful for someone else like me.

My first issue: Multiple inline edit options are showing

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

I have removed the editor.setCustomRte block & it worked fine. If you want to provide CKEditor options, this should be done at the pluginsOpts level as shown here.

Here is my second issue: Sometimes the editor options are not positioned properly

This was also fixed after removing the editor.setCustomRte block.

And, the last & main issue I faced while integration: Inline formatting not reflecting in the selected text

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.

Here is a working fiddle which you can refer for Inline CKEditor integration with GrapesJS

An extra note: I have faced another issue after removing editor.setCustomRte block - which was the fix of my first issue. It looks like:

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)

If any of you facing a similar error, note that it's because of the CKEditor type/version that you are using. I was using the Standard CKEditor version & that was the issue. After changing that to Standard-All CKEditor version, the issue was resolved.

Grapedrop is a site where you can create an account and check almost all properties of the GrapesJS.

Here is extra plugin list used in 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 option adding as your wish

Update: CKEditor Inline standard-all version works only with few HTML tags line <div>, <p>, <h1>-<h6>. This inline editor not popping up for elements like strong, i, span, etc. Here is a solution to the above-mentioned issue.