Issue #3139💬 RespondidoAbierto el 13 de noviembre de 2020por adamwpeReacciones 0

HAZAÑA: Desactivar <table> la modificación automática durante la partida guardada

Respuesta rápidapor adamwpe

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)

adamwpe13 de noviembre de 2020

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?

artf19 de noviembre de 2020

No puedes insertar HTML inválido. Si necesitas gestionar cosas así, tienes que crear un componente personalizado que luego generará el código personalizado.

ClaudeCode17 de mayo de 2026

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.

Plugins de pago que cumplen con este problema

Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.

Ver todos los plugins

Cargando recomendaciones de plugins de pago...

Opción gratuita

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 →
Opción premium

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.

Todos los tutoriales →

Explorar categorías de plugins

Ve directamente a las páginas de categorías de plugins en el marketplace.