¿Cómo cambiar el id/clase cuando aparece un nuevo elemento en el editor o renderizo un elemento con IP dinámica?
En tu callback 'block:drag:stop' deberías hacer un cambio en el 'droppedComponent' (que es una instancia de Component, así que usa su API), el '$('#staticId')' ni siquiera existe, el lienzo está en el otro marco del documento. '''js const randomId = '...'; droppedComponent.addAttributes({ id: randomId, onclick: 'jsFun...
Lee la respuesta completa abajo ↓Pregunta
Hola @artf, Espero que estés bien.
Tengo dos preguntas sobre la suma de bloques dinámicos,
- ¿Es posible renderizar el bloque con id dinámico?
- ¿Es posible cambiar los métodos id/class/onClick en los métodos 'block:drag:stop' o 'component:add' grapesjs?
Aquí tienes parte de mi código,
bm.add ("recorte de imágenes",
{
label: '<div class="gjs-block-label">Image Cropper</div>',
Tabulación: "2",
content: '<div id="staticId" onclick="jsFunc(staticId)"><h1>Hola</h1><div>'
}
)
En el ejemplo anterior necesito hacer dinámico en lugar de 'staticId'. Que también se pasa a la función onclick.
Estoy intentando cambiar ese id dentro del
editor.on('block:drag:stop', función (droppedComponent) {
$('#staticId').attr('id', 'id aleatorio está aquí');
}
Pero después del cambio, con la ayuda de '$('#staticId').attr('id', 'random id is here');' en realidad no recibe cambio.
En realidad estoy usando grapes.js con angular.js(Angular 1).
Entonces, ¿podrías sugerirme si hay alguna forma de resolver mi problema usando grapes.js? Si crees que se puede resolver usando jQuery, por favor también me lo sugiéndem así.
Respuestas (3)
En tu callback 'block:drag:stop' deberías hacer un cambio en el 'droppedComponent' (que es una instancia de Component, así que usa su API), el '$('#staticId')' ni siquiera existe, el lienzo está en el otro marco del documento. '''js const randomId = '...'; droppedComponent.addAttributes({ id: randomId, onclick: 'jsFunc('#${randomId}')', })
Hola @artf, Gracias por tu apoyo rápido.
Ahora me funciona,
droppedComponent.set({
atributos: {
id: 'randomId',
onclick: 'jsFunc("randomId")'
}
})
Esto me ha funcionado.
Supongamos que tengo contenido como,
bm.add ("recorte de imágenes",
{
label: '<div class="gjs-block-label">Image Cropper</div>',
Tabulación: "2",
content: '<div><h1>Hola</h1><img id="staticId" onclick="jsFunc(staticId)" src="imagePath" /><div>'
}
)
¿Hay alguna posibilidad de actualizar el id y la función onclick de la etiqueta img?
@AkibDeraiya123 puedes hacer lo que quieras, revisa la API por favor https://grapesjs.com/docs/api/component.html
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #1111
Cómo añadir la clase madre al arrastrar el elemento
Hola @artf, Espero que estés bien. Por favor, háganos saber cómo podemos añadir la clase madre de div cuando se arrastra un nuevo elemento...
Issue #1407
[PREGUNTAS] SUMA MÁS TBODY CADA VEZ QUE GUARDABA LOS DATOS HTML.
Hola @artf, Tuve un problema cuando tengo tablas en el editor y añado nuevas filas, y si mi tabla se guarda cuando se carga de nuevo, se añ...
Issue #1509
Cómo desactivar el botón de deshacer
Hola @artf, Espero que te vaya bien con uvas. ¿Podrías decirnos cómo desactivar el botón de deshacer cuando no hay datos en el administrado...
Issue #1917
[PREGUNTAS] Iconos en el Gestor de bloques
Hola, Quiero cambiar el icono de un bloque en el Administrador de Bloques: sé que forma parte de los atributos de la manera: Atributos: { C...
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.