Haz que todo el lienzo sea un elemento de Vue / React
Gracias @noogen tu respuesta tan detallada. Sí, creo que tienes razón y quédate con componentes; no estoy muy seguro de si el ToHtml, si es la solución adecuada para mí o no, porque no quiero gestionar dos tipos de sistemas, renderizando correctamente dentro del editor y uno en producción, usando las etiquetas. Así qu...
Lee la respuesta completa abajo ↓Pregunta
Hola a todos,
Más bien una pregunta general de si alguien ha conseguido que todo el lienzo (o de hecho el envoltorio) sea un elemento de Vue, es decir, que se pueda arrastrar un div personalizado como '<timer></timer>' y se renderice correctamente?
He intentado esto, puse el envoltorio como el elemento Vue (el), y funcionó al 'importar' código HTML, pero impide que el sistema de arrastrar y soltar funcione, supongo que porque ahora es un DOM virtual.
Vi esta publicación: https://github.com/artf/grapesjs/issues/275
pero optó por la vía de los componentes, añadiendo scripts a DomComponents.
¿Alguien ha conseguido esto? ¿O incluso en React o algo similar? ¿O es mejor quedarnos con componentes personalizados con scripts personalizados?
Respuestas (2)
Gracias @noogen tu respuesta tan detallada.
Sí, creo que tienes razón y quédate con componentes; no estoy muy seguro de si el ToHtml, si es la solución adecuada para mí o no, porque no quiero gestionar dos tipos de sistemas, renderizando correctamente dentro del editor y uno en producción, usando las etiquetas.
Así que ahora estoy cargando un nuevo script 'widgets.js' y luego ejecutando una función que dentro de él está 'vue_load_contact_form()', con un parámetro requerido, que parece funcionar bastante bien :)
Ahora necesito encontrar la mejor manera de hacer todos los scripts dentro del evento de 'carga' de página, para no ralentizar demasiado el renderizado de páginas.
script: function(){
const app1El = document.createElement("div");
app1El.id = 'app';
this.appendChild(app1El);
window.vue_load_contact_form(<?php eco $StorePage->get_client_id(); ?>);
}
De nuevo, gracias por tu solución.
Mi respuesta es que lo mejor sea ceñirme a scripts personalizados. He hecho componentes personalizados usando la plantilla de Lodash aquí: https://github.com/niiknow/grapesjs-components-farmer/blob/master/src/index.js#L2. Se espera una cadena del método 'toHtml' - https://github.com/niiknow/grapesjs-components-farmer/blob/master/src/traits.js#L126 - así que no vas a poder tener Virtual Dom.
El método 'toHtml' se utiliza para generar el HTML tanto para mostrarlo en el editor como para lo que obtienes al llamar al método 'editor.genHtml()'. Como resultado, creo un comando separado 'get-usable-html' para obtener el HTML que quiero aquí: https://github.com/niiknow/grapesjs-components-farmer/blob/master/src/index.js#L197; el método/comando convierte etiquetaName de componente personalizado al componente tagName nativo html. Y dado que solo es para usarlo en el editor, ¿realmente es tan beneficioso que sea un componente de Vue?
Grapesjs no entiende las plantillas y, debido al comportamiento que acabo de describir, esto hace que Grapejs sea un editor popular para generar plantillas. Esto significa que puedes generar HTML que tenga nombres de componentes personalizados y expresiones de plantilla, como la expresión común '{' de bigote. ¿Esto es lo que demuestra el número 275 con '{{ mensaje }}', que quizá hayas malinterpretado?
Si buscas en el número, verás que mucha gente lo utiliza como editor de plantillas de correo electrónico. Ejemplo:
'''html Estimado {{ nombre }}, ... omitido ... Gracias,
{{ site_url }}
Y la plantilla se evalúa para cada usuario durante el proceso de correo en algún proceso servidor posterior. ¿No sería malo que estas expresiones se eliminaran porque se evalúan en el editor de grapesjs? Por eso también elegí el poco común '<%' como expresión para usar la biblioteca 'lodash.template' en lugar de la expresión '{' de bigote.
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #2595
[Pregunta] Problemas para arrastrar HTML externo con draggable="true"
Quiero hacer que un elemento html externo se pueda arrastrar a GrapesJS, como cuando puedes arrastrar un bloque y que añada algo. Tengo una...
Issue #905
[Pregunta] necesito encontrar eventos necesarios.
¡Hola a todos! Al arrastrar un bloque al lienzo, y sueltarlo: ... Tenemos un evento que detectar, en qué bloque caemos. ?: pero cuando dejo...
Issue #3373
Pregunta: Colores de fondo predefinidos al seleccionar un elemento con una determinada clase o div.
Tengo una pregunta que espero que alguien pueda ayudar. Quiero crear un rasgo donde pueda elegir colores predefinidos al seleccionar un div...
Issue #2083
[PREGUNTA] model.get('toolbar') siempre devuelve null
Hola @artf Estoy intentando añadir una barra de herramientas personalizada a mi componente personalizado sin cambiar la barra predeterminad...
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.