Inline CKeditor in GrapesJS Editor integriert

Aug 20 2020

Ich arbeite in einer Editoranwendung, in der GrapesJS implementiert ist. Der Editor und die Funktion funktionieren einwandfrei. Ich habe Inline-CKeditor in den GrapesJS-Editor integriert und es gibt nur wenige Probleme.

Es werden mehrere Inline-Bearbeitungsoptionen angezeigt
Manchmal sind die Editoroptionen nicht richtig positioniert
Hauptproblem : Inline-Optionen werden angezeigt, spiegeln sich jedoch nicht im ausgewählten Text wider. Ich meine, wir können auf diese Inline-Optionen klicken, um den Inhalt des Editors zu formatieren, aber er wird nicht im Editor angezeigt.

Hier teile ich einige geschriebene Codes:

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

Hier ist JSFiddle, wo Sie die Arbeitsweise und den Code überprüfen können.

Ausführung:

Traubenjs - 0.16.18

ckeditor - Standard - 4.14.1

Was ist das erwartete Verhalten?

Beim Anwenden der Inline-Formatierungsoptionen aus den Inline-CKeditor-Optionen sollte dies im ausgewählten Text berücksichtigt werden.

Beschreiben Sie den Fehler detailliert:

Ich habe den CKeditor für Inline-Bearbeitungszwecke in den grapesJS-Editor integriert. Wenn ich Text zum Formatieren auswähle, werden derzeit die Inline-CKeditor-Optionen zusammen mit einigen weiteren Optionen in einer schwarzen Symbolleiste angezeigt. Ich bin darüber verwirrt. Und das Hauptproblem ist, dass selbst wenn ich eine der Inline-Formatierungsoptionen verwende, die Formatierung nicht im ausgewählten Text wiedergegeben wird. Mit der CKeditor-Inline-Option können keine Textformatierungen, Listen, Bild-Uploads, Links usw. ausgeführt werden.

Wie ist das aktuelle Verhalten?

Das Hauptproblem ist, dass selbst wenn ich eine der Inline-Optionen verwende, die Formatierung nicht im ausgewählten Text wiedergegeben wird. Mit der CKeditor-Inline-Option können keine Textformatierungen, Listen, Bild-Uploads, Links usw. ausgeführt werden.

Antworten

4 Sinto Sep 02 2020 at 13:42

Wie Sie sehen, bekomme ich keine Antwort von SO. Ich habe dieses Problem auch in Github gemeldet, wo ich Antworten auf ähnliche Probleme gesehen habe. Nach ein paar Tagen bekam ich eine Antwort und das funktionierte gut für mich. Deshalb möchte ich diese Antwort mit Ihnen allen teilen, was für jemanden wie mich hilfreich sein könnte.

Mein erstes Problem: Es werden mehrere Inline-Bearbeitungsoptionen angezeigt

Das GrapesJS CKEditor-Plugin registriert CKEditor bereits als benutzerdefinierte RTE, sodass der Aufruf editor.setCustomRtees tatsächlich zweimal einrichtet .

Ich habe den editor.setCustomRteBlock entfernt und es hat gut funktioniert. Wenn Sie CKEditor-Optionen bereitstellen möchten, sollte dies auf der hierpluginsOpts gezeigten Ebene erfolgen .

Hier ist mein zweites Problem: Manchmal sind die Editoroptionen nicht richtig positioniert

Dies wurde auch nach dem Entfernen des editor.setCustomRteBlocks behoben .

Und das letzte und wichtigste Problem, mit dem ich bei der Integration konfrontiert war: Inline-Formatierung spiegelt sich nicht im ausgewählten Text wider

Das GrapesJS CKEditor-Plugin ist abhängig von der Standard-All CKEditor-Version und verwendet nicht die Standard CKEditor-Version . Verwendenhttps://cdn.ckeditor.com/4.14.1/standard-all/ckeditor.js es wird behoben.

Hier ist eine funktionierende Geige, auf die Sie sich für die Inline-Integration von CKEditor in GrapesJS beziehen können

Ein zusätzlicher Hinweis : Ich habe nach dem Entfernen des editor.setCustomRteBlocks ein anderes Problem festgestellt - das war die Lösung meines ersten Problems. Es sieht aus wie:

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)

Wenn einer von Ihnen einen ähnlichen Fehler hat, beachten Sie, dass dies auf den von Ihnen verwendeten CKEditor-Typ / die CKEditor-Version zurückzuführen ist. Ich habe die Standard-CKEditor-Version verwendet und das war das Problem. Nachdem dies in die Standard-All CKEditor-Version geändert wurde , wurde das Problem behoben.