Añade un script usando arrastrar y soltar que añadirá elementos dinámicamente
Por fin se soluciona @pouyamiralayi Gracias por ayudarme. Después de usar tu solución. Inserta el guion en la posición correcta.
Lee la respuesta completa abajo ↓Pregunta
Hola. Gracias por este gran proyecto. Lo estoy usando en uno de mis proyectos y necesito ayuda.
1- Tengo un elemento de bloque con un script. Este script añade un formulario dinámicamente dentro de un iframe. '''javascript blockManager.add('custom-script', { etiqueta: 'email-personalizado-script', categoría: 'Formas', Contenido: ' <div> <script type="text/javascript" src="https://app.getresponse.com/view_webform_v2.js?u=zqQFS&webforms_id=SGRbz"></script> <div>', atributos: { título: 'Recibir formulario de respuesta', Clase: 'FA FA-CUADRADO' } })
Cuando arrastro y suelto el guion en cualquier parte de la página. Grapesjs ignora la posición y muestra la forma al final de la página.
! [Captura de pantalla del 27-09-2019 12-54](https://user-images.githubusercontent.com/9118214/65742551-358c4180-e123-11e9-8527-e7901d64d6da.png)
Pero cuando exporto el HTML y CSS desde grapesjs, la posición está correcta donde debería estar. Por qué está pasando esto.
! [Captura de pantalla del 27-09-2019-12-42](https://user-images.githubusercontent.com/9118214/65742988-3920c800-e125-11e9-87dd-48386b7083d0.png)
**2- Cuando activo "allowScripts: 1," en la función de init de grapesjs. Puedo añadir scripts pero no puedo arrastrar y soltar (usar) mis elementos de bloque personalizados**
'''javascript
let blockManager = editor. Jefe de bloque;
dejemos fragmentos = await this.getSectionSnippets();
snippets.map((item) => {
blockManager.add(item.name, {
Etiqueta: item.name,
categoría: 'Secciones',
contenido: '<html><head><script></script><style>${item.css}</style></head><body>${item.html}</body></html>',
atributos: {
Título: item.name,
Clase: 'FA FA-CUADRADO'
}
})
});```
Si desactiva "allowScript", entonces puedo usar mi elemento de bloque personalizado pero no puedo añadir scripts.
Respuestas (3)
Por fin se soluciona @pouyamiralayi Gracias por ayudarme. Después de usar tu solución. Inserta el guion en la posición correcta.
¡Hola! ¿Has probado a poner tu guion en la etiqueta de guion? De este modo, estará executed en el end y probablemente respetará el orden que deseas:
editor. BlockManager.add('form-block', {
script: function(){/* your-js */}
}
Salud.
Cuando arrastro y suelto el guion en cualquier parte de la página. Grapesjs ignora la posición y muestra la forma al final de la página.
Para ser sincero, no lo sé, todo depende de la biblioteca de terceros (en tu caso GetResponse) y de cómo añade contenido una vez cargado
Cuando activo "allowScripts: 1" en la función de inicio de grapesjs. Puedo añadir scripts pero no puedo arrastrar y soltar (usar) mis elementos de bloque personalizados
En primer lugar, no es necesario usar etiquetas 'html', 'head' o 'body' en tus bloques. Estás dejando fragmentos HTML dentro de un 'cuerpo' de documento ya definido... Te recomiendo mucho que leas sobre Components, ya que tendrás mucho más control que los bloques simples
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #2814
[PREGUNTA] Botón de panel personalizado que activa/deshabilita dinámicamente los scripts de usuario
Hola y gracias por compartir un proyecto tan bueno. Estoy intentando personalizar algunas cosas en el editor, pero tengo algunas preguntas...
Issue #1788
[PREGUNTA] ¿Cómo añadir dinámicamente recursos desde el servidor después de la inicialización del editor?
¡Hola! ¡Gracias por el trabajo que has hecho construyendo esta biblioteca tan chula! Estoy usando la última versión de Angular y me quedo c...
Issue #2310
[PREGUNTA] ¿Cómo puedo especificar la posición para arrastrar elementos?
Hola, estoy haciendo un proyecto con esta librería y quiero especificar la posición para arrastrar componentes en ella Por ejemplo, tengo u...
Issue #1777
[Pregunta] ¿Cómo cambiar dinámicamente los DomComponents?
Hola, gracias por esta gran biblioteca, estoy trabajando con un sistema de boletines que obtiene contenido de la base de datos y genera los...
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.