Add new block with elements and traits
@kuldeepcis You create a social-icons component as a <div>(by default) and then on init you add this: Then you select the <a> and expect to see social-icons traits on it, well you're wrong, because that <a> is another component... Change your logic, make the a as a component and inject only the image
Read full answer below ↓Question
Hello @artf I've to create new block with multiple elements and traits. Like social profile element having multiple element like facebook, G-plus, twitter many more elements. and every element having two options one for URL another for icon to show/hide through check-box. Please see fiddle on URL: https://jsfiddle.net/3xhqkc96/9/ Now in this fiddle having single element with traits, changes reflected on block main div not on specific element.
Please provide the solution for above query.
Thanks in advance :)
Answers (2)
@kuldeepcis You create a social-icons component as a <div>(by default) and then on init you add this:
<a data-js="social-icons" href="" target="_blank" style="border: none;text-decoration: none;" class="facebook">
<img src="https://www.ctltrax.com/staging/frontend/assets/files/ext-mbuilder-email-editor/assets/social/facebook.png" border="0"><!---->
</a>
Then you select the <a> and expect to see social-icons traits on it, well you're wrong, because that <a> is another component...
Change your logic, make the a as a component and inject only the image
domc.addType('social-icons', {
model: ...
defaults: {
tagName: 'a',
attributes: {
target: '_blank',
...
}
},
...
view: ...
init() {
...
// If you need you can make the image not
// selectable with `data-gjs-selectable="false"`
// or just ignore it at all with `style="pointer-events:none"`
comps.add(`<img src="https://www.ctltrax.com/staging/frontend/assets/files/ext-mbuilder-email-editor/assets/social/facebook.png" border="0">`);
}
});
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 #511
Cannot edit the content after update it via block manager API
Hello @artf sorry for my last issue, I must create a new issue, my problem is got error like this EDIT : sorry i just fixed my last issue w...
Issue #1817
Change HTML content while block is render in editor
Hello @artf I have one block into block manager like As per above script inside the block, i want to add dynamic HTML content while this bl...
Issue #1733
How to remove script tag which is added by add block manager script
Hello @artf I want to export final/production based html content excluding the script(Only which is added by block manager). Suppose i am a...
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...
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.