Cambiar el contenido HTML mientras el bloque se renderiza en el editor
No hay @AkibDeraiya123 si intentas acceder al modelo desde el 'script' significa que has malinterpretado totalmente su concepto; por favor, lee con atención aquí https://grapesjs.com/docs/modules/Components-js.html#basic-scripts 'script' es para el HTML final (donde 'model', editor y GrapesJS no existen), no para el e...
Lee la respuesta completa abajo ↓Pregunta
Hola @artf Tengo un bloque en el gestor de bloques como
bm.add("encabezado-con-barra-de búsqueda",
{
label: '<div class="gjs-block-label">Cabecera con barra de búsqueda</div>',
Tab: "1",
categoría: "Portafolio",
Contenido: {
script: función () {
Estoy recibiendo el ID de la nueva división añadida por este bloque aquí.
const idOfNewDiv = $(this).attr("id");
Usando la línea de abajo puedo editar el DOM, pero no se refleja en editor.getHtml()
document.getElementById(idOfNewDiv).innerHTML = "<p>Hola</p>";
},
Contenido: '<div class="testing"></div>'
}
}
);
Según el script anterior dentro del bloque, quiero añadir contenido HTML dinámico mientras este bloque se renderiza en la interfaz.
Sé que no necesito cambiar de DOM. Pero necesito cambiar usando el modelo, aunque no sé cómo puedo cambiarlo usando el modo por id/clase.
¿Podrías ayudarme, por favor, cómo puedo lograr esto?
Respuestas (3)
No hay @AkibDeraiya123 si intentas acceder al modelo desde el 'script' significa que has malinterpretado totalmente su concepto; por favor, lee con atención aquí https://grapesjs.com/docs/modules/Components-js.html#basic-scripts 'script' es para el HTML final (donde 'model', editor y GrapesJS no existen), no para el editor
Gracias por la respuesta @artf , ¿Entonces significa que no puedo cargar contenido dinámico en bloques mientras se renderiza en el editor? Si es así, ¿cómo puedo?
¿Puedo reemplazar el HTML de todo el bloque por 'this.innerHTML = 'Nuevo contenido en Html''?
Por supuesto que puedes, pero no a través de la propiedad de 'script'. Tienes que crear un componente personalizado y actualizar allí su modelo
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #1733
Cómo eliminar la etiqueta de script que se añade mediante el script de añadir bloques
Hola @artf Quiero exportar contenido html final/basado en producción excluyendo el script (solo que se añade con el gestor de bloques). Sup...
Issue #792
La propiedad de script usando función no funciona con bloques
En la documentación de Componentes & JS hay este ejemplo: Esto funciona perfectamente. Pero no podría usar una función en lugar de una cade...
Issue #1683
¿Cómo cambiar el id/clase cuando aparece un nuevo elemento en el editor o renderizo un elemento con IP dinámica?
Hola @artf, Espero que estés bien. Tengo dos preguntas sobre la suma de bloques dinámicos, 1) ¿Es posible renderizar el bloque con id dinám...
Issue #511
No se puede editar el contenido después de actualizarlo mediante la API del gestor de bloques
Hola @artf perdón por mi último problema, debo crear un nuevo problema, mi problema tiene un error como este EDITO: perdón, acabo de arregl...
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.
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.