Cómo preservar el atributo Id con toHTML
pero ahora los identificadores ya no están en el html ¿Puedes explicar mejor tu caso? Porque esta nueva función no debería cambiar el comportamiento anterior. Por cierto, para explicar esta nueva opción, tomemos por ejemplo un componente que en 'component.toHTML()' devuelve esto: '''html <sección id="alguno-id"> <h1>¡...
Lee la respuesta completa abajo ↓Pregunta
El registro de cambios indica
Añadió la posibilidad de generar atributos personalizados en el método toHTML
¿Cómo usamos esta función? No encuentro los problemas correspondientes, ni información sobre las opciones para el método toHTML en la wiki.
Usé esta función en la 0.14.20 y anteriores para enviar el html al servidor y hacer más procesamiento del html y el css, pero ahora los ids ya no están en el html. Me gusta configurarlo para preservar las clases y los ids.
Respuestas (3)
pero ahora los identificadores ya no están en el html
¿Puedes explicar mejor tu caso? Porque esta nueva función no debería cambiar el comportamiento anterior.
Por cierto, para explicar esta nueva opción, tomemos por ejemplo un componente que en 'component.toHTML()' devuelve esto: '''html <sección id="alguno-id"> <h1>¡Hola!</h1>
</section> ``` Así que ahora, por ejemplo, puedes hacer esto: '''js component.toHTML({ attributes(component, attr) { if (attr.id == 'alguno-id') { atra['algunos-atrac'] = 'algún valor'; } si no (component.get('tagName') == 'h1') { atra. clase = 'h1'; } regresar la atracción; }, }); ``` Volver '''html <sección id="alguno-id" algo-attr="alguno-valor"> <h1 class="h1">¡Hola!</h1> </section> ```Probablemente tengas razón. No es esta función la que ha cambiado ese comportamiento. Quizá sea un error, puedes cambiar el título del problema si lo confirmas.
Mi caso de prueba:
Plantilla:
<head>
<meta charset="utf-8">
<style>div{margin:0 auto;}</style>
</head>
<div style="width:500px; border:2px negro sólido;">
<div style="width:400px;height:400px; border:2px solid red;">
</div>
<div style="width:300px;height:300px; border:2px solid green;">
</div>
<div style="width:200px;height:200px; border:2px solid blue;">
</div>
</div>
Versión 0.14.21 salida html (de grapesjs.com/demo.html):
<meta charset="utf-8"/>
<div class="c3945">
<div>
</div>
<div>
</div>
<div>
</div>
</div>
Salida html de la versión 0.14.21
* {
Tamaño de caja: caja de borde;
}
cuerpo {
marje: 0;
}
#iht0ek{
ancho:400px;
Altura: 400px;
borde:2px rojo sólido;
}
#i9ry44{
ancho:300px;
Altura: 300px;
borde:2px verde sólido;
}
#igqj8h{
ancho:200px;
Altura: 200px;
borde:2px azul sólido;
}
div{
margen-top:0px;
margen-derecha:auto;
margen-bottom:0px;
margen-izquierda:auto;
}
.c3945{
ancho: 500px;
borde:2px negro sólido;
}
Los CSS tienen los IDs adecuados, pero el HTML no.
En mi entorno local sigue en la versión 0.14.20 y la salida incluye los ids tanto en html como en css:
HTML:
<meta charset="utf-8"/>
<div id="izai">
<div id="iupd"></div>
<div id="invg"></div>
<div id="itzz"></div>
</div>
CSS
* {
Tamaño de caja: caja de borde;
}
cuerpo {
marje: 0;
}
#izai{
ancho: 500px;
borde:2px negro sólido;
}
#iupd{
ancho:400px;
Altura: 400px;
borde:2px rojo sólido;
}
#invg{
ancho:300px;
Altura: 300px;
borde:2px verde sólido;
}
#itzz{
ancho:200px;
Altura: 200px;
borde:2px azul sólido;
}
div{
margen-top:0px;
margen-derecha:auto;
margen-bottom:0px;
margen-izquierda:auto;
}
Gracias @Jogai, en realidad tienes razón, hay un error (que se corregirá en la próxima versión), pero me gustaría sugerir probar esta opción que también debería corregir el comportamiento actual: '''js grapesjs.init({ ... Normalmente, cuando actualizas el 'estilo' del componente, esto cambia el el atributo 'estilo' de Element. Desafortunadamente, el diseño en línea no lo permite uso de consultas multimedia (@media) o incluso pseudoselectores (por ejemplo: hover). Cuando 'avoidInlineStyle' es cierto, todos los estilos se insertan dentro de la regla css avoidInlineStyle: cierto, })
Probablemente algún día esto será 'cierto' por defecto, ya que sin él no puedes estilizar un solo componente en diferentes dispositivos o en distintos estados (por ejemplo: hover el cursor
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #1563
[Bug] Problema con el rasgo - Cambiar el proveedor de vídeo
Versión: 0.14.40 Bug: Cuando cambias el campo "Proveedor" -> todos los ajustes desaparecidos. Ocurre en Chrome, Safari y Firefox, las últim...
Issue #1429
Contenido vacío al cargar desde almacenamiento remoto si el array de componentes no está vacío
Tengo problemas para cargar contenido remoto almacenado en el editor cuando el 'JSON' contiene 'gjs-components' no vacíos Mis datos JSON se...
Issue #1753
[Bug/Pregunta] StyleManager - SectorsView - addToCollection() utiliza el atributo "name" para construir el ID y falla con varios espacios o caracteres especiales
Hola @artf, Usando la propiedad pluginOpts del método grapesjs.init(), personalicé los sectores que aparecen en el Style Manager (a través...
Issue #2044
El desarrollo de npm en un servidor local no funcionó
Hice el procedimiento para iniciar el servidor local usando la rama 'dev' tal y como se describe en README, funcionó en la consola, pero fa...
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.
Tutorial
Ship to Production Faster: What’s New in GrapesJS Shadcn
Supercharge your page builder! GrapesJS Shadcn adds live drag previews, rich text / commands, dynamic data, and canvas presets to ship to prod faster.
Tutorial
How to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services
A complete walkthrough of building a production GrapesJS editor: how to choose a preset, pick plugins, and scope setup services without burning a sprint.
Tutorial
GrapesJS Inline RTE Plugins Update: CKEditor 5 v0.1.4 and Froala Inline Text Editor
CKEditor 5 Inline for GrapesJS v0.1.4 fixes Studio SDK toolbar clipping, iframe injection and link balloon bugs. Compare with Froala Inline — both $69.
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.