Inline CKeditor integrado en el editor GrapesJS

Aug 20 2020

Estoy trabajando en una aplicación de edición donde se implementa GrapesJS. Su editor y función funcionan bien. He integrado CKeditor en línea al editor GrapesJS y tiene algunos problemas.

Se muestran varias opciones de edición en línea
A veces, las opciones del editor no están ubicadas correctamente
Problema principal : las opciones en línea se muestran pero no se reflejan en el texto seleccionado. Quiero decir que podemos hacer clic en esas opciones en línea para formatear el contenido del editor, pero no se refleja en el editor.

Aquí estoy compartiendo algunos códigos escritos:

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

Aquí está JSFiddle donde puede verificar el código de trabajo.

Versión:

uvasjs - 0.16.18

ckeditor - estándar - 4.14.1

¿Cuál es el comportamiento esperado?

Al aplicar las opciones de formato en línea de las opciones de CKeditor en línea, debe reflejarse en el texto seleccionado.

Describe el error detallado:

He integrado el CKeditor en el editor de grapeJS para fines de edición en línea. Actualmente, cuando selecciono texto para formatearlo, las opciones de CKeditor en línea se muestran junto con otras pocas opciones en una barra de herramientas negra. Estoy confundido por eso. Y el problema principal es que incluso yo uso cualquiera de las opciones de formato en línea, el formato no se refleja en el texto seleccionado. No se puede hacer nada desde la opción en línea de CKeditor como formato de texto, lista, carga de imágenes, enlace, etc.

¿Cuál es el comportamiento actual?

El problema principal es que incluso yo uso cualquiera de las opciones en línea, el formato no se refleja en el texto seleccionado. No se puede hacer nada desde la opción en línea de CKeditor como formato de texto, lista, carga de imágenes, enlace, etc.

Respuestas

4 Sinto Sep 02 2020 at 13:42

Como ve, no obtengo ninguna respuesta de SO. También informé este problema en Github donde he visto respuestas de problemas similares. Después de unos días, recibí una respuesta y funcionó bien para mí. Así que deseo compartir esa respuesta con todos ustedes, que podría ser útil para alguien más como yo.

Mi primer problema: se muestran varias opciones de edición en línea

El complemento GrapesJS CKEditor ya registra CKEditor como un RTE personalizado, por lo que llamar editor.setCustomRtees en realidad configurarlo dos veces.

He eliminado el editor.setCustomRtebloque y funcionó bien. Si desea proporcionar opciones de CKEditor, debe hacerlo en el pluginsOptsnivel que se muestra aquí .

Aquí está mi segundo problema: a veces, las opciones del editor no están colocadas correctamente

Esto también se corrigió después de quitar el editor.setCustomRtebloque.

Y, el último y principal problema que enfrenté durante la integración: el formato en línea no se refleja en el texto seleccionado

El complemento GrapesJS CKEditor depende de la versión Standard-All CKEditor , no utiliza la versión Standard CKEditor . Utilizarhttps://cdn.ckeditor.com/4.14.1/standard-all/ckeditor.js se arreglará.

Aquí hay un violín de trabajo que puede consultar para la integración de Inline CKEditor con GrapesJS

Una nota adicional : me enfrenté a otro problema después de eliminar el editor.setCustomRtebloqueo, que fue la solución de mi primer problema. Parece que:

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)

Si alguno de ustedes enfrenta un error similar, tenga en cuenta que se debe al tipo / versión de CKEditor que está utilizando. Estaba usando la versión estándar de CKEditor y ese era el problema. Después de cambiar eso a la versión Standard-All CKEditor , el problema se resolvió.