Add Attribute to Child Elements in component
Check here all the methods available for components: https://grapesjs.com/docs/api/component.html Btw you would something like this
Read full answer below ↓Question
This is the component I try to add in Editor.
`
<div class="page">
<div class="col1"></div>
<div class="col2"></div>
</div>
`
After adding those components I try to add some computed values to the elements like this,
`
element.on('component:add',function(ele){
ele.addAttributes({
'data-top' : topOffset,
'data-left' : leftOffset,
});
editor.render();// For render Updated html
});`
But, this code only update the .page component only.
How Can I add those attr into .col1,.col2 elements inside .page component ?
Answers (2)
Check here all the methods available for components: https://grapesjs.com/docs/api/component.html
Btw you would something like this
element.on('component:add', component => {
component.find('.col1, .col2').forEach(comp => {
comp.addAttributes({ ... });
});
// YOU DON'T NEED TO RE-RENDER
// editor.render();
});
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1584
Not getting the Script of Block from editor.getComponents()
Below is the Component that I'm adding. this.editor.BlockManager.add('dob-mmyy-pii', { id: 'dob-mmyy', label: DOB (MM, YYYY) (PII), categor...
Issue #2008
[Question]The canvas turns dark and unmodifiable on adding a large piece of custom html.
I used to add custom html with editor.addComponent(). It works well at most of the time, but when I try to insert a large piece of HTML whi...
Issue #1982
[QUESTIONS] addcomponent after the selected component
how do I make it possible to add new components after the component I selected, at this time I use editor.DomComponents.addComponent (block...
Issue #1505
adding row and sections not working
i am integrating grapejs with angular6. but it is not working means it is not showing on blocks i am using following code
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Related tutorials
In-depth guides on the same topic.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.