HAZAÑA: Desactivar <table> la modificación automática durante la partida guardada
Ah, si uso este https://github.com/artf/grapesjs-custom-code, no modifica el html durante el guardado. Esto no funciona cuando se usa 'gjs-preset-newsletter'. Porque si ejecutas el comando 'gjs-get-inlined-html', entonces se modifica el código. CÓDIGO E.g. HTML: Ejecuta 'gjs-get-inlined-html' y se produce: ¿Supongo qu...
Lee la respuesta completa abajo ↓Pregunta
Estoy teniendo un problema: al guardar un componente HTML personalizado (solo una tabla), Grapes JS lo modifica.
Guarda antes ! imagen
Después de guardar. ! imagen
Así que quiero poder insertar una tabla porque me gustaría intercalarla con twig (un lenguaje de plantillas):
<table>
{% para el ítem en los ítems %}
<tr>
{{ item.name }}
</tr>
{% endfor %}
</table>
Creo que está vinculado al #606, pero no veo si eso ayuda con este problema que tengo.
También está vinculado a #1939
¿Existe la posibilidad de desactivar esta función?
Idealmente, tener una forma de tener un componente html que permita que el contenido no pueda ser modificado de ninguna manera por grapesjs.
Gracias, Adam
Respuestas (3)
Ah, si uso este https://github.com/artf/grapesjs-custom-code, no modifica el html durante el guardado.
Esto no funciona cuando se usa 'gjs-preset-newsletter'.
Porque si ejecutas el comando 'gjs-get-inlined-html', entonces se modifica el código.
CÓDIGO E.g. HTML:
<table>
<tr>
<th>Descritpion
</th>
<th>
</th>
</tr>
{% para un artículo en basket_items %}
<tr>
<td>
<h1>{{ item.event_name }} - {{ item.location }}: {{ item.date }} {{ item.from_time }} a {{ item.to_time }}
</h1>
</td>
<td>
</td>
</tr>
{% endfor %}
</table>
Ejecuta 'gjs-get-inlined-html' y se produce:
{% para un artículo en basket_items %}
{% endfor %}
<mesa >......
¿Supongo que no hay forma de evitarlo?
No puedes insertar HTML inválido. Si necesitas gestionar cosas así, tienes que crear un componente personalizado que luego generará el código personalizado.
Gracias por informar de esto, @adamwpe.
¡Gran sugerencia sobre HAZAÑA: ¡Desactivar <table> la modificación automática durante la partida! Aunque esta función específica aún no está en la API principal, existen varias formas de lograr un comportamiento similar.
Usando el sistema de eventos: '''javascript editor.on('component:update', (component) => { Tu lógica aquí });
**Enfoques alternativos:**
- Escuchar 'selector:add' para cambios en el selector CSS
- Usar 'selector:custom' para reglas personalizadas
- Aprovechar los eventos 'change:*' para un seguimiento detallado
- Crear un plugin que extienda el editor con esta capacidad
**Lo hace oficial:**
Si esta función beneficiaría a muchos usuarios, considera abrir una Solicitud formal de Funcionalidad en el repositorio GrapesJS con:
- Un caso de uso detallado
- Ejemplo de código que muestra el comportamiento deseado
- Por qué esto es importante para tu flujo de trabajo
El equipo central es receptivo a solicitudes de funcionalidades bien motivadas respaldadas por casos de uso reales.
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #3138
Evitar <TABLE>que se modifique durante el guardado.
Hola a todos, Estoy teniendo un problema: al guardar un componente HTML personalizado (solo una tabla), Grapes JS lo modifica. Guarda antes...
Issue #5334
La selección del tipo de componente personalizado no funciona en el lienzo
Versión GrapesJS [X] Confirmo que se debe usar la última versión de GrapesJS ¿Qué navegador usas? Chrome, Opera, Edge, etc Enlace de demo r...
Issue #4000
Pegar un componente en la capa raíz del cuerpo genera TypeError
Versión GrapesJS [X] Confirmo que se debe usar la última versión de GrapesJS ¿Qué navegador usas? Chrome v89 Enlace de demo reproducible ht...
Issue #3608
HAZAÑA: Desactivar el arrastre
¿Qué intentas añadir a GrapesJS? He implementado un componente alternativo de edición de texto (no basado en RTE). Quiero que la gente pued...
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
Embed GrapesJS in Your SaaS: A Weekend Guide
Embed GrapesJS in your SaaS and ship a white-label page builder over a weekend. Honest tradeoffs, real code, and the plugins that close the UX gap.
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.