Añadir tributo a HTML

Question

Hola a todos,

Quiero añadir un id para cada bloque que arrastre y suelte en el lienzo; Para ser más claro, no quiero añadir un Id para cada tipo, por ejemplo: Imagen, Tabla, Caja, ... Quiero añadir ad Id para cada bloque, lo que significa que, por ejemplo, el bloque "sección 1" se convierte en '<table... blockId = 1>'.

Estoy intentando usar esos dos comandos:

'editor.getSelected().view.$el[0].setAttribute("blockId","1")'
'editor.getSelected().get('components').trigger('resetNavigator')'

Sí, los cambios aparecen en el lienzo si pongo "Inspeccionar elemento", pero si intento exportar el código HTML de la plantilla, el atributo no se añade.

¿Alguna idea de cómo conseguir eso y hacer que los cambios también aparezcan en el código exportado?

Gracias de antemano.

nojacko · Accepted Answer

Creo que necesitas añadir el atributo al modelo, en lugar de a la vista.

https://github.com/artf/grapesjs/blob/50cc585f23f2560077fd0e9a42ced22e67e69723/src/dom_components/model/Component.js#L298

Luego, tendrás que renderizar la vista.

Creo que es así, pero no hay garantías 😄

sea seleccionado = editor.getSelected();
selected.addAttributes({blockId: 1});
selected.view.render();

ezp127 · Answer

Hola, Solo dejo un ejemplo por si alguien más lo necesita.

artf · Answer

Tal como sugirió James, pero sin 'selected.view.render()' ya que la vista recibirá cambios simultáneamente

Añadir tributo a HTML

Pregunta

Respuestas (3)

Preguntas y respuestas relacionadas

[PREGUNTA] Desactiva un arrastre y solta por bloques

Gestor de bloques en GrapesJS que no funciona para columnas

Elemento de imagen

[PREGUNTA] ¿Es posible hacer múltiples rasgos para hacer un img editable y <a> etiquetar en el componente de tabla?

Plugins de pago que cumplen con este problema

Explorar categorías de plugins