Los componentes con etiqueta personalizada no se renderizan si se especifican en el cuerpo del tema
Hay 2 problemas:Olvidaste especificar 'isComponent' (usado en el proceso de análisis sintáctico) '''js comps.addType('test-component-type', { isComponent: el => el.tagName === 'TEST-TAG', Vista: { usa el gancho onRender en lugar de render onRender() { const el = document.createElement("h1"); el.innerText = 'COMPONENTE...
Lee la respuesta completa abajo ↓Pregunta
Hola Creé un esqueleto muy sencillo del editor GrapesJS. Plantilla HTML: '''html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Demo</title> </head> <body> <div id="gjs"> <test-tag></test-tag> </div> </body> </html> ``` Javascript: '''javascript Importa 'grapesjs/dist/css/grapes.min.css' importar uvas de 'uvas';var editor = grapesjs.init({ autorender: 0, Contenedor: '#gjs', fromElement: cierto, storageManager: {type: null}, });
Obtén el módulo DomComponents VAR Comps = Editor. DomComponents; var defaultType = comps.getType('default');
comps.addType('test-component-type', { modelo: { valores predeterminados: {} }, Vista: { etiquetaNombre: 'div', render: función () { defaultType.view.prototype.render.apply(esto, argumentos); var element = document.createElement("h1"); element.innerText = "COMPONENTE DE PRUEBA OK"; this.el.appendChild(element); devuelvo esto; } },
});
editor.render()
editor. BlockManager.add('test-block', { etiqueta: 'Test Block', Contenido: { Tipo: 'Tipo-componente-prueba' } });
Resultado de la carga:
! [imagen](https://user-images.githubusercontent.com/2712350/52058564-6609e480-2570-11e9-94f8-d7a4425837ad.png)
Como ves, el componente no se renderiza.
Pero si dejo caer bloques manualmente, todo está bien:
! [imagen](https://user-images.githubusercontent.com/2712350/52058679-a10c1800-2570-11e9-9d46-dcee38db9e66.png)
Si cambio la plantilla y pongo el atributo 'data-gjs-type' en el valor '<test-tag data-gjs-type="test-component-type"></test-tag>', todo funciona también.
! [imagen](https://user-images.githubusercontent.com/2712350/52058816-ecbec180-2570-11e9-98b5-dda664c24813.png)
También probé la construcción con 'isComponent' definido, pero con el mismo resultado. Las etiquetas personalizadas, especificadas en las plantillas, no se renderizan al cargar la página.
Parece un bug, o quizá me equivoco en algún punto y se requieren llamadas de render adicionales.
Gracias.
Respuestas (3)
Hay 2 problemas:
- Olvidaste especificar 'isComponent' (usado en el proceso de análisis sintáctico) '''js comps.addType('test-component-type', { isComponent: el => el.tagName === 'TEST-TAG', Vista: { usa el gancho onRender en lugar de render onRender() { const el = document.createElement("h1"); el.innerText = 'COMPONENTE DE PRUEBA OK'; this.el.appendChild(el); } }, });
* Actualmente, los nuevos tipos de componentes no funcionan para la plantilla inicial,
así que la única forma es añadirlos mediante plugins (no tuve tiempo de ver por qué pasa)
https://jsfiddle.net/m8hkuza3/
@artf, gracias por tu respuesta, pero también
también probé la construcción con 'isComponent' definido, pero con el mismo resultado.
bueno, implementé esta función mediante plugins como mencionaste.
No tengo ni idea de por qué los nuevos tipos de componentes tampoco funcionan, me haré un PR si lo averiguo.
Este hilo se ha bloqueado automáticamente porque no ha habido actividad reciente desde que se cerró. Por favor, abre un nuevo problema para bugs relacionados.
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #1173
Los datos de la etiqueta de cabeza que aparecen en el cuerpo y la cabeza muestran vacíos
Hola Artf hay etiquetas de cabeza y etiquetas meta en mi etiqueta de cabeza de HTML que asigno a los componentes del editor. Como Pero está...
Issue #1699
[BUG] Los elementos del enlace no son copiables ni eliminables
En el editor, si tenemos un elemento enlace con algunas clases, el editor no permite copiar o eliminar el elemento. Versión GrapesJS: v0.14...
Issue #1055
[BUG] No se puede modificar el texto interno de un DIV
Hola, Estoy usando la última versión (grapesjs - 0.14.9). He cargado un código HTML externo en el editor. Luego intenté editar texto dentro...
Issue #1978
[Bug]: Los estilos siempre se aplicaban a las clases
Hola, Tengo un problema con el estilizado de los objetos individuales. El siguiente código html: '''html <div class="ddm-flex-cols"> <div c...
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 →Tutoriales relacionados
Guías detalladas sobre el mismo tema.
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.