Issue #2069💬 RespondidoAbierto el 6 de junio de 2019por SparragusReacciones 0

'allowScripts: true' sigue <script> eliminando etiquetas

Respuesta rápidapor dosponsor

¿Podríais darnos la solución a este problema?

Lee la respuesta completa abajo ↓

Pregunta

Hola a todos. Gracias por crear y mantener este increíble proyecto. 🙏

Descripción del bug

Tengo un bloque que inserta un script como se especifica aquí: https://grapesjs.com/docs/modules/Components-js.html#basic-scripts

Cuando arrastro el bloque al lienzo, el componente efectivamente tendrá el script unido a sí mismo. Sin embargo, cuando recargo la página, el script ya no está.

He visto varios problemas donde se discute esto, y todos parecen resolverse añadiendo

'''js const editor = grapesjs.init({ ... permitenScripts: 1, });


Ejemplos:
https://github.com/artf/grapesjs/issues/1123
https://github.com/artf/grapesjs/issues/837
https://github.com/artf/grapesjs/issues/721

Sin embargo, 'allowScripts: 1' no parece funcionar para mí.

## Esperado

Espero que <script> sigan ahí porque 'permiteScript: 1'.

## Caso reproducible
Aquí tienes un CodeSandbox donde se puede reproducir el error: https://codesandbox.io/s/compassionate-gagarin-dclo5

Pasos para reproducirse:
1. Arrastra un bloque de "Botón" al lienzo.
2. Haz clic en el botón. Muestra una alerta.
2. Puedes ver el código del script si abres el modal donde se muestra el código.
3. Recarga la página.
4. Haz clic en el botón de nuevo, no aparece ninguna alerta.
5. Ve a ver el código, y <script> ya no estará.

Aquí tienes un vídeo corto de mí reproduciendo estos pasos: https://www.youtube.com/watch?v=g4fes1nU5h0

Espero que esta información sea suficiente. Si se necesita más, estaré encantado de proporcionárselo.

Gracias. ¡Salud!

Respuestas (3)

dosponsor13 de junio de 2019

¿Podríais darnos la solución a este problema?

artf14 de junio de 2019

Gracias por el informe @Sparragus El problema aquí es cuando usas una función para el 'script' dentro de Blocks. Cuando el editor intenta almacenar el JSON, la estructura se serializa, pero la función no es serializable, por lo que para ese componente se almacena una cadena de 'script' vacía.

Sé que eso es lo que indicamos en la documentación, pero usamos bloques solo para mostrar ejemplos rápidos; en realidad, siempre deberías crear un componente personalizado para el que tiene un script.

'''js editor. DomComponents.addType('foo-button', { modelo: { Predeterminados: { etiquetaNombre: "botón", nombre: "Button", contenido: "Botón", script: function() { this.addEventListener("click", () => { alerta("Miau"); }); } } } }) editor. BlockManager.add("button", { etiqueta: "Button", Contenido: { Tipo: 'Foo-Button' } });

Sparragus24 de junio de 2019

@artf Gracias por la aclaración. Salud.

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 →

Explorar categorías de plugins

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