Issue #2673✓ ResueltoAbierto el 20 de marzo de 2020por qtarantReacciones 4

Función para actualizar el árbol DOM tras cambios en componentes

Respuesta rápidapor qtarant3

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)

👍 Muy útilqtarant23 de marzo de 2020
Fragmento de códigoTEXT
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...
pouyamiralayi21 de marzo de 2020

@qtarant echa un vistazo a comentario #2537 ¡Salud!

Preguntas y respuestas relacionadas

Continúa investigando con debates sobre temas similares.

Plugins de pago que cumplen con este problema

Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.

Ver todos los plugins

Cargando recomendaciones de plugins de pago...

Opción gratuita

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 →
Opción premium

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.