Issue #1683💬 RespondidoAbierto el 26 de diciembre de 2018por AkibDeraiya123Reacciones 0

¿Cómo cambiar el id/clase cuando aparece un nuevo elemento en el editor o renderizo un elemento con IP dinámica?

Respuesta rápidapor artf

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,

  1. ¿Es posible renderizar el bloque con id dinámico?
  2. ¿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)

artf27 de diciembre de 2018

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}')', })

AkibDeraiya12327 de diciembre de 2018

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?

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 →

Tutoriales relacionados

Guías detalladas sobre el mismo tema.

Todos los tutoriales →

Explorar categorías de plugins

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