Add attribute to HTML
Question
Hello everyone,
I want to add an id for each block I drag and drop in the canvas; To be more clear, I do not want to add an Id for each type, per example: Image, Table, Box, ... I want to add ad Id for each block, which means per example, the block "1 section" becomes <table ... blockId = 1>.
I am trying to use those 2 commands:
-
editor.getSelected().view.$el[0].setAttribute("blockId","1") -
editor.getSelected().get('components').trigger('resetNavigator')
Yes the changes do appear on the canvas if I do "Inspect Element", but If I try to export the HTML code of the template, the attribute is not added.
Any idea how to achieve that and make the changes appear in the exported code too?
Thank you in advance.
Answers (3)
I think you need to add the attribute to the model, rather than the view.
Then, you'll need to render the view.
I think it's like this, but no guarantees 😄
let selected = editor.getSelected();
selected.addAttributes({blockId: 1});
selected.view.render();
Hello, Just leaving an example in case someone else needs.
editor.on('block:drag:stop', function(model) {
model.addAttributes({ 'data-block_id': '123xyz' });
});
Just like James suggested but without selected.view.render() as the view will receive changes simultaneously
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1661
I've created html table and cannot drag new elements to table cells
Hello. if I create html table with next block of code, everything works, I'm able to drop a Quote, for example, to any cell: But next code...
Issue #969
[BUG] Video block - Loop option
Hello everyone, I noticed that when you drag and drop a video block to the canvas, choose youtube, add the correct video ID and check the l...
Issue #2961
BUG: Components in custom modal isn't editable
Hello, I'm trying to add custom modal block to my project and I want to change content of this modal also with drag&drop. Here's code of my...
Issue #2595
[Question] Having trouble dragging external html with draggable="true"
I want to make an external html element able to be dragged into GrapesJS, like how you can drag in a block and it will add something. I hav...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.