HTML interno personalizado <template> y competente que falta al crear un bloque con él
Hola @aryeharmon acabo de usar esto en la demo (pruébalo tú mismo en consola) '''js Var Domc = Editor. DomComponents; var defaultModel = domc.getType('default').model; var defaultView = domc.getType('default').view; domc.addType('template', { model: defaultModel.extend({}, { isComponent: function(el) { if (el.tagName...
Lee la respuesta completa abajo ↓Pregunta
Me diste una solución en el #244 pero esto ya no funciona
Respuestas (3)
Hola @aryeharmon acabo de usar esto en la demo (pruébalo tú mismo en consola) '''js Var Domc = Editor. DomComponents; var defaultModel = domc.getType('default').model; var defaultView = domc.getType('default').view; domc.addType('template', { model: defaultModel.extend({}, { isComponent: function(el) { if (el.tagName == 'PLANTILLA') { console.log(el, el.innerHTML); como template.children devolverán un array vacío, el Traverser saltarán todos los nodos, por lo tanto los adjuntarán como una cadena (ellos se procesará más adelante) return {type: 'template', components: el.innerHTML} } } }), view: defaultView.extend({ '<template>' no se puede mostrar, así que en lienzo usa otra etiqueta etiquetaNombre: 'div' }), });
y importar '<div><template><div>ALGO TEXTO</div></template></div>' funciona tal y como se esperaba.
Vale, ya veo cuál es el problema, aparentemente cuando añado:
Var Domc = Editor. DomComponents;
var defaultModel = domc.getType('default').model;
var defaultView = domc.getType('default').view;
domc.addType('template', {
model: defaultModel.extend({}, {
isComponent: function(el) {
if (el.tagName == 'PLANTILLA') {
console.log(el, el.innerHTML);
como template.children devolverán un array vacío, el Traverser
saltarán todos los nodos, por lo tanto los adjuntarán como una cadena (ellos
se procesará más adelante)
return {type: 'template', components: el.innerHTML}
}
}
}),
view: defaultView.extend({
'<template>' no se puede mostrar, así que en lienzo usa otra etiqueta
etiquetaNombre: 'div'
}),
});
Para HTML, los elementos existentes en la página no tienen efecto. Solo se han añadido elementos de dom recientes. Por ejemplo, ya tengo una etiqueta plantilla en la página al cargar, no obtendré las propiedades. Pero si añado la plantilla después, funcionará.
Por cierto, el editor.render(); es después del registro de domc.addType
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #1696
Los rasgos aparecen a la primera vez cuando arrastras un componente personalizado
Hola artf, he creado un componente personalizado y le he añadido rasgos; al arrastrar este componente al editor y seleccionarlo, los rasgos...
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 #1086
[Pregunta] ¿Cuál es la forma de generar componentes con JavaScript externo?
Parece que no debería hacer esa pregunta, pero he dedicado mucho tiempo a buscar y no he conseguido una buena guía sobre esto. Quiero crear...
Issue #2008
[Pregunta]El lienzo se vuelve oscuro e inmodificable al añadir un gran fragmento de html personalizado.
Solía añadir html personalizado con 'editor.addComponent()'. Funciona bien la mayor parte del tiempo, pero cuando intento insertar un gran...
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.