Desaparecen componentes personalizados al guardar (Vue.js)
@pouyamiralayi Gracias por eso, me ha orientado — es un ejemplo que me funciona para renderizar un componente Vue y se carga de nuevo en :), pero seguro que puede ser útil para otra persona: ¡Gracias a todos por la ayuda!
Lee la respuesta completa abajo ↓Pregunta
Hola a todos,
Estoy intentando probar a añadir algunos componentes de Vue.js personalizados al gestor de bloques, y a primera vista, todo va bien: renderiza correctamente y los componentes de Vue responden.
Pero si guardo la plantilla, recargo mi página y pongo en el StorageManager 'gjs-style', 'gjs-components', 'gjs-html', 'gjs-css'.
El componente personalizado ya no se renderiza. Parece que el StorageManager elimina cualquier etiqueta de script???? Como si revisara mi solicitud REST GET, 'gjs-html' sí contiene la <script> etiqueta.
Antes de guardar:
! antes
Después de recargar la carga: ! después
No estoy muy seguro de que haya algún problema con mi componente:
`
editor. BlockManager.add("vueApp", {
etiqueta: "Vue App",
categoría: 'Básico',
id: "default-vue-app",
Contenido: {
script: function() {
const app1El = document.createElement("div");
app1El.id = 'app';
const app1Script = document.createElement("script");
app1Script.type = "texto/javascript";
app1Script.src = "http://[::1]/assets/vue/vueApp.js";
this.appendChild(app1El);
this.appendChild(app1Script);
},
Rasgos: [
{
Tipo: 'texto',
etiqueta: 'Nice',
Nombre: 'custom_att',
valor: 'Quién sabe',
}
]
}
});
`
¿Alguien ha probado a usar Vue.js componentes?Respuestas (3)
@pouyamiralayi
Gracias por eso, me ha orientado — es un ejemplo que me funciona para renderizar un componente Vue y se carga de nuevo en :), pero seguro que puede ser útil para otra persona:
editor. DomComponents.addType('vue_example', {
modelo: {
init() {
if (typeof this.getAttributes()['custom_att'] === "indefinido")
this.addAttributes({'custom_att': 'default'});
Onload, consigue los últimos enlaces
if (this.getTrait('custom_att') === indefinido)
this.getTrait('custom_att').set('default 'default');
this.getTrait('custom_att').set('default 'default');
this.listenTo(this, 'change:attributes', this.reRender);
},
eliminado() {
},
Predeterminados: {
removible: cierto,
Arrastrable: Cierto,
Droppable: Cierto,
Badgable: Cierto,
Estilizado: Cierto,
Resaltable: Cierto,
copiable: falso,
redimensionable: falso,
editable: false,
Hoverable: Cierto,
Rasgos: [
{
Tipo: 'texto',
etiqueta: 'Nice',
Nombre: 'custom_att'
}
],
script: function(){
const app1El = document.createElement("div");
app1El.id = 'app';
const app1Script = document.createElement("script");
app1Script.type = "texto/javascript";
app1Script.src = "http://[::1]/assets/vue/vueApp.js";
this.appendChild(app1El);
this.appendChild(app1Script);
}
},
reRender() {
this.view.render();
}
},
isComponent: function (el) {
if (el.tagName === 'vue_example')
return {type: 'vue_example'};
}
});
editor. BlockManager.add('vue_example', {
id: 'vue_example',
etiqueta: 'Vue Test',
categoría: 'Vue',
Contenido: {
etiquetaNombre: 'vue_test',
tipo: 'vue_example',
editable: false
}
});
¡Gracias a todos por la ayuda!
¡Hola @adamwpe!
La importación de etiquetas de script está deshabilitada por la configuración predeterminada del editor, lo que explica por qué tus etiquetas de scripts están eliminadas por el analizador HTML, poner la opción de configuración del editor 'allowScripts' en 'true' debería solucionar el problema, por ejemplo:
'''Manuscrito mecanografiado grapesjs.init({ // [...] allowScripts: cierto, // [...] });
Espero que esto ayude :)
@adamwpe tuvimos algo así en el pasado, ¡disculpa por no haberlo llevado hasta el final! Haz esto:
editor. DomComponents.addType('your-type', {
modelo:{
isComponent: el => {},
valores predeterminados:{
script:function(){},
},
}
})
no es necesario extender desde dView y dModel en las versiones más recientes. Y para la integración de Vue JS, por favor, ten en cuenta que la estructura interna de tu componente Vue no sería detectada por Grapesjs porque no se genera ningún modelo para ello. Si tuviste alguna oportunidad de superar esta situación, ¡por favor háznoslo saber! ¡Salud!
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #1863
Incorporación de nuevos componentes a Block Manager
Estoy intentando añadir varios componentes que están en mi canvas al gestor de bloques, pero creo que por un problema de identificación no...
Issue #1618
¿Los componentes hijos no se rastrean en los modelos?
Hola, estoy enfrentando un problema extraño y necesito vuestra ayuda. cuando muevo componentes dentro de bloques, en el modelo de vista los...
Issue #773
Varios editores en la misma ventana
¡Hola a todos! Estoy intentando iniciar varios editores en la misma ventana. Creo que casi todo funciona perfectamente (edición, guardado,...
Issue #791
Añadir un nuevo botón en la barra de herramientas
Hola, Estoy intentando añadir un nuevo botón a la barra de herramientas con todos los componentes. He podido sumar para cada componente por...
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.