Inline CKeditor integrato nell'editor GrapesJS

Aug 20 2020

Sto lavorando in un'applicazione editor in cui è implementato GrapesJS. Il suo editor e la sua funzionalità funzionano bene. Ho integrato CKeditor in linea nell'editor di GrapesJS e ha pochi problemi.

Vengono visualizzate più opzioni di modifica in linea
A volte le opzioni dell'editor non sono posizionate correttamente
Problema principale : le opzioni in linea vengono visualizzate ma non si riflettono nel testo selezionato. Voglio dire che possiamo fare clic su quelle opzioni in linea per formattare il contenuto dell'editor ma non si riflette nell'editor.

Qui sto condividendo alcuni codici scritti:

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

Ecco JSFiddle dove puoi controllare il & codice funzionante.

Versione:

uvajs - 0.16.18

ckeditor - standard - 4.14.1

Qual è il comportamento previsto?

Durante l'applicazione delle opzioni di formattazione in linea dalle opzioni di CKeditor in linea, dovrebbe riflettersi nel testo selezionato.

Descrivi dettagliatamente il bug:

Ho integrato CKeditor nell'editor uvaJS per scopi di editing in linea. Attualmente, quando seleziono il testo per formattarlo, le opzioni di CKeditor in linea vengono visualizzate insieme ad altre poche opzioni in una barra degli strumenti nera. Sono confuso su questo. E il problema principale è che anche io uso una qualsiasi delle opzioni di formattazione in linea, la formattazione non si riflette nel testo selezionato. Non è possibile eseguire alcuna operazione dall'opzione inline di CKeditor come formattazione del testo, elenco, caricamento di immagini, collegamento, ecc.

Qual è il comportamento attuale?

Il problema principale è che anche io uso una qualsiasi delle opzioni in linea, la formattazione non si riflette nel testo selezionato. Non è possibile eseguire alcuna operazione dall'opzione inline di CKeditor come formattazione del testo, elenco, caricamento di immagini, collegamento, ecc.

Risposte

4 Sinto Sep 02 2020 at 13:42

Come vedi non ricevo alcuna risposta da SO. Ho anche segnalato questo problema in GitHub dove ho visto risposte a problemi simili. Dopo alcuni giorni, ho ricevuto una risposta e ha funzionato bene per me. Quindi desidero condividere questa risposta con tutti voi, che potrebbe essere utile per qualcun altro come me.

Il mio primo problema: vengono visualizzate più opzioni di modifica in linea

Il plug-in CKEditor di GrapesJS registra già CKEditor come RTE personalizzato, quindi la chiamata in editor.setCustomRterealtà lo imposta due volte.

Ho rimosso il editor.setCustomRteblocco e ha funzionato bene. Se vuoi fornire le opzioni di CKEditor, questo dovrebbe essere fatto al pluginsOptslivello mostrato qui .

Ecco il mio secondo problema: a volte le opzioni dell'editor non sono posizionate correttamente

Questo problema è stato risolto anche dopo aver rimosso il editor.setCustomRteblocco.

E l'ultimo e principale problema che ho affrontato durante l'integrazione: la formattazione in linea non si riflette nel testo selezionato

Il plugin GrapesJS CKEditor dipende dalla versione Standard-All CKEditor , non utilizzando la versione Standard CKEditor . Usohttps://cdn.ckeditor.com/4.14.1/standard-all/ckeditor.js si risolverà.

Ecco un violino funzionante a cui puoi fare riferimento per l'integrazione di Inline CKEditor con GrapesJS

Una nota in più : ho affrontato un altro problema dopo aver rimosso il editor.setCustomRteblocco, che è stata la soluzione del mio primo problema. Sembra:

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)

Se qualcuno di voi ha riscontrato un errore simile, nota che è a causa del tipo / versione di CKEditor che stai utilizzando. Stavo usando la versione standard di CKEditor e questo era il problema. Dopo averlo modificato nella versione Standard-All CKEditor , il problema è stato risolto.