Issue #1280💬 RespondidoAbierto el 12 de julio de 2018por HakuTheWolfSpiritReacciones 0

Renderizado de componentes de terceros en el editor grapessj

Respuesta rápidapor artf

Vue compila en tiempo de ejecución si usas la versión con compilador. Exactamente como este componente https://github.com/alexjoverm/v-runtime-templateComo segunda pregunta, me gustaría saber si es posible conectarse a eventos del editor desde dentro de un componente Sí, puedes acceder al modelo del editor desde Compo...

Lee la respuesta completa abajo ↓

Pregunta

Hola,

Nos gustaría renderizar controles de terceros. Esta es una pregunta general y queremos saber si vamos en la dirección correcta. Para renderizar los controles estamos obligados a utilizar tecnología de terceros (Vue, React u frameworks similares). Ambos frameworks tienen un problema común: van rezagados en la capacidad de renderizar componentes en tiempo de ejecución.

El problema con Vue, por ejemplo, es que elimina el nodo envoltorio y sus hijos. Sería fácilmente posible recrear la estructura html. Sin embargo, a Backbone no parece gustarle ese modelo y el modelo se pierde, por lo que el editor deja de funcionar correctamente.

Alternativamente, los componentes podrían renderizarse en la función de renderizado de su componente. Pero Vue podría no ser capaz de hacerlo.

Aún no he probado uvas con React, pero existe la posibilidad de que React sea capaz de compilar plantillas en tiempo de ejecución.

¿Qué sugerirías? ¿Tienes algún enfoque que podríamos haber pasado por alto?

Como segunda pregunta, me gustaría saber si es posible conectar eventos desde el editor desde dentro de un componente. Me gustaría ejecutar algo de código cuando se active el evento 'canvas:drop'. El objetivo es tener una solución alternativa para el posicionamiento absoluto con arrastrar y soltar y redimensionar en forma de bloque hasta que se implemente la función de hoja de ruta.

Gracias de antemano por tu respuesta.

Respuestas (3)

artf15 de julio de 2018

Vue compila en tiempo de ejecución si usas la versión con compilador. Exactamente como este componente https://github.com/alexjoverm/v-runtime-template

Como segunda pregunta, me gustaría saber si es posible conectarse a eventos del editor desde dentro de un componente

Sí, puedes acceder al modelo del editor desde Components a través de 'this.em' '''js someMethodInComponent() { const { em } = esto; em.on('alguén-evento', ...); em.once('alguén-evento', ...); em.trigger('alguno-evento'); // ... }

HakuTheWolfSpirit31 de julio de 2018

Hola, gracias por la respuesta.

Vue compila en tiempo de ejecución si usas la versión con compilador. Exactamente como este componente https://github.com/alexjoverm/v-runtime-template

El problema con Vue es que realmente no existe un método que me permita poner una cadena como parámetro y obtener html como salida. He hecho esta pregunta en StackOverflow y espero obtener una respuesta pronto.

sí, puedes acceder al modelo del editor desde components a través de this.em

👍

artf2 de agosto de 2018

El problema de Vue es que realmente no existe un método que me permita poner una cadena como parámetro y obtener html como salida. He hecho esta pregunta en StackOverflow y espero obtener una respuesta pronto.

Sí, pero siempre puedes crear un elemento y montar la instancia de Vue en tiempo de ejecución y luego obtener su contenido HTML

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 →

Tutoriales relacionados

Guías detalladas sobre el mismo tema.

Todos los tutoriales →

Explorar categorías de plugins

Ve directamente a las páginas de categorías de plugins en el marketplace.