Issue #1133💬 AnsweredOpened May 25, 2018by kuldeepcis0 reactions

Add new block with elements and traits

快速解答by artf

@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)

artfMay 26, 2018

@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">`);
		}
});
lock[bot]September 17, 2019

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.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →
Premium option

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.

All tutorials →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.