Adding multiple text type traits.
Question
Whenever i am trying to add multiple traits of type text with all different conditions and on different tags but it will take only last one at every traits conditions. Please help me out with the solution.
Answers (2)
Read the issue template then provide code and demo
editor.DomComponents.addType('text', {
isComponent: el =>( (el.attributes&&el.attributes.paraJustify&&el.attributes.paraJustify.value) ),
model: {
defaults: {
traits: [
{
type: 'select',
options: [
{ value: 'text-align:center', name: 'Center' },
{ value: 'text-align:left ', name: 'Left' },
{ value: 'text-align:right', name: 'Right' },
{ value: 'text-align:justify', name: 'Justify' },
],
label: 'align',
name: 'style',
},
],
// To make default style.
// attributes: { style: 'text-align:center' },
},
}
});
editor.DomComponents.addType('text', {
isComponent: el => el.attributes&&el.attributes.bannerBackgroundImage&&el.attributes.bannerBackgroundImage.value,
model: {
defaults: {
traits: [
{
type: 'select',
options: [
{ value: 'background-image:url("https://s.freecharge.in/content/images/egold/egold-banner2.png")', name: 'Original' },
{ value: 'background-image:none; background-color:#ffffff; ', name: 'None' },
],
label: 'Backgroud Image',
name: 'style',
},
],
},
}
});
editor.DomComponents.addType('text', {
isComponent: el => el.attributes&&el.attributes.ctaLocation&&el.attributes.ctaLocation.value,
model: {
defaults: {
traits: [
{
type: 'select',
options: [
{ value: ' left:0px; right:0px; bottom:5px; ', name: 'Original' },
{ value: 'top:0px', name: 'Top' },
],
label: 'CTA location',
name: 'style',
},
{
type: 'select',
options: [
{ value: 'background-color:red', name: 'Red' },
{ value: 'background-color:blue ', name: 'Blue' },
{ value: 'background-color:grey', name: 'Grey' },
{ value: 'background-color:orange', name: 'Orange' },
],
label: 'Background-color',
name: 'style',
// changeProp: 1
},
],
},
}
});Related Questions and Answers
Continue research with similar issue discussions.
Issue #2786
Adding multiple text type traits
Whenever i am trying to add multiple traits of type text with all different conditions and on different tags/attributes but it will take on...
Issue #1681
adding new custom trait to Video Component
In video Component i need to add new custom traits beside the existing ones, when i do this all traits are disappeared
Issue #2667
link element not append in head element in ediot.canvas #firefox #grapesjs
am trying to add google fonts in web-builder to change the font style for that to import am adding cdn in editor the code works in chrome a...
Issue #2517
Screen flickers on mouse hover on container
Tried multiple plugin i.e. webpage, newsletter and basic block but all three cases it starts flickering as soon as I take move over contain...
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 →Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.