No puedo usar ckeditor 5 con grapesjs

¡Hola, Arthur y colaboradores! Estoy creando un plugin para usar CKEditor 5 en grapesjs, basado en el plugin-ckeditor de grapesjs que ya está disponible. No consigo que funcione. Mientras uso el editor, algunos estilos no funcionan y, tras algunos clics, ckeditor 5 responde con el siguiente mensaje de error:

"Uncaught Xa: view-renderer-filler-was-lost: El nodo de relleno en línea se perdió. Leer más: https://docs.ckeditor.com/ckeditor5/latest/framework/guides/support/error"

Seguí correctamente las directrices de la documentación de ckeditor 5 y me fié del plugin grapesjs-ckeditor. No sé si no estoy siguiendo correctamente las pautas de la página "Reemplazar Editor de Texto Enriquecido", o si estoy programando mal, o simplemente es una incompatibilidad del nuevo CKeditor 5 con la edición desde un iframe.

Aquí está el código javascript:

'''javascript importar uvas de 'uvas';

const stopPropagation = e => e.stopPropagation();

export por defecto grapesjs.plugins.add('gjs-plugin-ckeditor', (editor, opts = {}) => { Sea c = opts;

Sea defaults = { Opciones de CKEditor Opciones: {},

En qué lado del elemento colocar la barra de herramientas Opciones disponibles: 'izquierda|centro|derecha' posición: 'izquierda', };

Valores predeterminados de carga para (dejemos nombre en los valores predeterminados) { si (!( nombre en c)) c[name] = defaults[name]; }

si (! InlineEditor) { lanzar un nuevo error ('instancia de CKEDITOR no encontrada'); }

editor.setCustomRte({ enable: async(el, rte) => { Si ya existe, me centraré en ello if(rte) { el.contentEditable = true; sea rteToolbar = editor. RichTextEditor.getToolbarEl(); [].forEach.call(rteToolbar.children, (hijo) => { hijo.estilo.mostrar = 'ninguno'; }); console.log('if rte 1', rte); await rte.then( e => { RTE = e; e.ui.view.toolbar.element.style.display = 'bloqueo'; }); return rte; }

Parece que el plugin 'sharedspace' no funciona exactamente como se espera Así que ayudará a ocultar otras barras de herramientas ya creadas sea rteToolbar = editor. RichTextEditor.getToolbarEl(); [].forEach.call(rteToolbar.children, (hijo) => { hijo.estilo.mostrar = 'ninguno'; });

Init CookEditors rte = await InlineEditor .create( el, { Idioma: 'PT-BR' }).catch( error => { consola.error( error ); } );

if(rte){ // Evitar el desenfoque cuando se hace clic en parte del elemento de CKEditor rte.on('mousedown', e => { const editorEls = grapesjs.$('.gjs-rte-toolbar'); ['off', 'on'].forEach(m => editorEls[m]('mousedown', stopPropagation)); });

editor. RichTextEditor.getToolbarEl().appendChild( rte.ui.view.toolbar.element ); el.contentEditable = true; }else{ console.log( 'El editor no se ha inicializado' ); }

return rte; },

disable(el, rte) { el.contentEditable = false; } });

Actualizar la posición de la barra de herramientas RTE editor.on('rteToolbarPosUpdate', (pos) => { Actualización por posición interruptor (c.posición) { Caso 'centro': sea diff = (pos.elementWidthWidth / 2) - (pos.targetWidth / 2); pos.left = pos.elementLeft + diff; pausa; Caso 'correcto': sea ancho = pos.targetWidth; pos.izquierda = pos.elementIzquierda + pos.elementoAncho - ancho; pausa; }

if (pos.top <= pos.canvasTop) { pos.top = pos.elementTop + pos.elementHeight; }

Comprueba si no fuera del lienzo if (pos.left < pos.canvasLeft) { pos.izquierda = pos.lienzoIzquierda; } }); });

En el HTML cargo:
'''html 
<enlace href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="hoja de estilo">
<script src="https://unpkg.com/grapesjs"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/10.1.0/inline/ckeditor.js"></script>
<script src="dist/grapesjs-plugin-ckeditor.min.js"></script><!--Mi build de plugin grapesjs-ckeditor-5-->'''