RTE se pierde al abrirse justo después de soltar el componente 'activeOnRender'

Sí, supongo que tienes razón. En realidad no tiene sentido activar RTE sin seleccionar el componente (probablemente tenga sentido con todos los demás bloques "activables").

Hola. Yo y @ronaldohoch hemos encontrado una solución para este problema.

Activamos el evento de desplazamiento cuando el RTE está activado. Aquí está el código:

'''javascript Activa el evento de desplazamiento desde el lienzo para que grapesjs fijar correctamente la posición de CKEditor editor.on("rte:enable", () => { editor.trigger('canvasScroll'); });

Hola, acabo de actualizar el archivo desde el commit bb4a661, y creo que está tan cerca que estoy usando el código grapesjs-ckeditor y la primera apertura de RTE, está colocado correctamente: ! imagen

Pero en la segunda vez que el rte se abre, vuelve a perderse... :/ ! imagen

Seguiré mirándolo :/

'''javascript Sea c = { Opciones:{ sharedSpaces:'' } };

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 (! CKEDITOR) { lanzar un nuevo error ('instancia de CKEDITOR no encontrada'); }

editor.setCustomRte({ enable(el, rte) { Si ya existe, me centraré en ello if(rte && rte.status != 'destruido') { this.focus(EL, RTE); return rte; }

el.contentEditable = true;

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

Consulta las opciones obligatorias var opt = c.options; var plgName = 'sharedspace';

if (opt.extraPlugins) { if (typeof opt.extraPlugins === 'cadena') opt.extraPlugins += ',' + plgName; si no, opt.extraPlugins.push(plgName); } else { opt.extraPlugins = plgName; }

if(!c.options.sharedSpaces) { c.options.sharedSpaces = {top: rteToolbar}; }

Init CookEditors rte = CKEDITOR.inline(el, c.options);

/** * Implementar el método 'rte.getContent' para que GrapesJS pueda recuperar correctamente el contenido generado por KE ('rte.getData') * * Ver: * - {@link https://github.com/artf/grapesjs/issues/2916} * - {@link https://github.com/artf/grapesjs/blob/dev/src/dom_components/view/ComponentTextView.js#L80} * - {@link https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_editor.html#method-getData} */ rte.getContent = rte.getData;

Haz que el evento de clic se propague rte.on('contentDom', () => { var editable = rte.editable(); editable.attachListener(editable, 'click', () => { el.click(); }); });

La barra de herramientas no se carga inmediatamente, así que estará mal posicionada. Con este truco activamos un evento que actualiza la posición de la barra de herramientas rte.on('instanceReady', e => { var toolbar = rteToolbar.querySelector('#cke_' + rte.name); if (barra de herramientas) { toolbar.style.display = 'bloqueo'; } editor.trigger('canvasScroll') });

Evita el desenfoque cuando se pulsa parte del elemento de CKEditor rte.on('dialogShow', e => { const editorEls = grapesjs.$('.cke_dialog_background_cover, .cke_dialog'); ['off', 'on'].forEach(m => editorEls[m]('mousedown', stopPropagation)); });

this.focus(EL, RTE);

return rte; },

disable(el, rte) { el.contentEditable = false; if(rte & rte.focusManager) rte.focusManager.blur(true); },

Focus(el, rte) { No hagas nada si ya estás concentrado if (rte && rte.focusManager.hasFocus) { regresar; } el.contentEditable = true; rte & rte.focus(); }, });

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

<details>

Gracias por informar de esto, @mcottret.

El problema con RTE fuera de lugar al abrirse justo después de soltar el componente 'activeOnRender' parece ser una condición de carrera o un problema de sincronización de gestión de estado. Esto suele ocurrir cuando los eventos del ciclo de vida de los componentes y las modificaciones del DOM se superponen, creando un estado inconsistente.

Qué probar:

1. Añadir un envoltorio setTimeout para asegurar que el DOM se ha asentado: '''javascript setTimeout(() => { Tu operación aquí }, 0);

2. **Comprobar el orden de inicialización** — asegúrate de que los componentes estén completamente cargados antes de interactuar con ellos

3. **Utilizar el sistema de eventos del editor** — escuchar los eventos de finalización:
'''javascript
editor.on('component:mount', (component) => {
  Es seguro interactuar con el componente aquí
});

Recomendaciones de siguientes pasos:

• Prueba con la última versión de GrapesJS si no lo has hecho
• Proporcionar un ejemplo mínimo reproducible (CodeSandbox) — esto ayuda al equipo a identificar la causa raíz más rápido
• Incluir errores de GrapesJS, de navegador y de consola en tu informe