Función para actualizar el árbol DOM tras cambios en componentes
Ya he resuelto mi problema. El código clave es el evento "rte:disable" que se activa cuando se cierra el Editor de Texto Enriquecido (rte). Y otra cosa importante es que el contenido que ha editado no está en el modelo de componentes, solo en su vista, así que tienes que actualizar el modelo con ese contenido. El códi...
Lee la respuesta completa abajo ↓Pregunta
Hola. Estoy desarrollando un sitio usando este software increíble. Ahora estoy personalizando el editor y he encontrado una tarea que no puedo continuar. Estoy usando el plugin ckeditor y funciona como se esperaba. En la barra de herramientas del editor de ckeditor tengo la opción de insertar imágenes en línea en el texto. Funciona bien, pero el problema es que me gustaría que GrapesJS reconociera esta imagen como un componente (también tengo un componente y un bloque de imagen en GrapesJS) como es habitual, por ejemplo, cuando la edición del texto ha terminado. La idea es actualizar el DOM componente (si es posible) después de que la edición (con la imagen insertada por ckeditor) haya terminado. He buscado en la API pero no he encontrado ninguna función que actualice el DOM del componente, así que GrapesJS conoce el componente de imagen. Como punto final, si guardo el contenido en la base de datos y lo vuelvo a cargar, GrapesJS carga todo el DOM y la imagen pasa a ser un componente GrapesJS. ¿Existe alguna función para actualizar el árbol de componentes por componente? El mismo problema ocurre si insirto párrafos en ckeditor y pongo párrafos como componentes en GrapesJS. Los párrafos se reconocen como componentes tras guardar en la base de datos y volver a cargar.
Gracias de antemano.
Respuestas (2)
Ya he resuelto mi problema.
El código clave es el evento "rte:disable" que se activa cuando se cierra el Editor de Texto Enriquecido (rte).
Y otra cosa importante es que el contenido que ha editado no está en el modelo de componentes, solo en su vista, así que tienes que actualizar el modelo con ese contenido.
El código relevante es:
'editor.on('rte:disable', (componentView) => {
const model = componentView.model;
const innerHTML = componentView.$el[0].innerHTML;
const contentModel = model.get('content');
if (contentModel !== innerHTML) {
model.set('content', innerHTML);
const html = editor.getHtml();
const css = editor.getCss();
editor. DomComponents.getWrapper().set('content', '');
editor.setComponents(html);
editor.setStyle(css);
}
});`
Espero que esto ayude a otras personas...@qtarant echa un vistazo a comentario #2537 ¡Salud!
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #3412
El guardado automático funciona parcialmente y deja de funcionar tras insertar texto
Hola a todos. Estoy usando este proyecto increíble para una aplicación de producción escrita con React.js, así que lo integré dentro de mi...
Issue #3699
El flotamiento de la celda desplaza aleatoriamente a la celda real
¡Hola! Estoy usando grapesJs para editar correos electrónicos en un proyecto de mi empresa, con el plugin Newsletter. Todo funciona muy bie...
Issue #906
[Pregunta]¿Cómo cambiar el contenido de componentes personalizados (html) de AJAX?
Hola @artf, Antes que nada, gracias por este increíble plugin. ¿Podríais decirme cómo puedo actualizar o cambiar el contenido de bloqueo? C...
Issue #2549
[PREGUNTA] Actualizar vista de componentes al cambiar la propiedad
Hola a todos, Estoy intentando crear un componente que actualice su vista en función del valor de una propiedad '''javascript editor. DomCo...
Plugins de pago que cumplen con este problema
Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.
Cargando recomendaciones de plugins de pago...
Consulta los plugins de código abierto de GrapesJS en GitHub O haz una búsqueda rápida en nuestro catálogo gratuito.
Explora plugins gratuitos →Los plugins premium incluyen soporte, actualizaciones regulares y funciones listas para producción — ahorrando días de trabajo de integración.
Explora plugins premium →Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.