'allowScripts: true' sigue <script> eliminando etiquetas
¿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)
¿Podríais darnos la solución a este problema?
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' } });
@artf Gracias por la aclaración. Salud.
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #2615
[Bug]: tipo de rasgo 'alcance' no encontrado
Hola @artf, ¡Gracias por crear este increíble repositorio! Me encontré con un error que aparece en la demo de la web (https://grapesjs.com/...
Issue #2640
Añadir atributos extra con Stylemanager para cambiar el atributo del bloque seleccionado
Gracias por este plugin tan increíble. Lo estoy integrando con mi proyecto actual. Tengo un problema con ello. Aquí está mi código, he añad...
Issue #428
Cambiar el fondo del cuerpo
Hola, Antes que nada, quiero daros las gracias por este proyecto increíble! Tengo algunas preguntas sobre el editor, y más concretamente so...
Issue #827
[PREGUNTA] Cambiar la ubicación del panel de mandos
¡Biblioteca increíble, gracias! Tengo dos preguntas que espero que puedas ayudar.¿Cómo puedo mover el panel de comandos de arriba a izquier...
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 →Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.