Add Attribute to Child Elements in component
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...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.