<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><divid="native-carbon"class="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/"class="sidebar-link">Introduction</a></li><li><ahref="/docs/getting-started.html"class="sidebar-link">Getting Started</a></li><li><divclass="sidebar-group"><pclass="sidebar-heading open"><span>Modules</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/modules/Assets.html"class="sidebar-link">Assets</a></li><li><ahref="/docs/modules/Blocks.html"class="sidebar-link">Blocks</a></li><li><ahref="/docs/modules/Commands.html"class="sidebar-link">Commands</a></li><li><ahref="/docs/modules/Components.html"class="sidebar-link">Components</a></li><li><ahref="/docs/modules/Components-js.html"class="sidebar-link">Components & JS</a></li><li><ahref="/docs/modules/Traits.html"class="active sidebar-link">Traits</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/modules/Traits.html#add-traits-to-components"class="sidebar-link">Add Traits to Components</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Traits.html#built-in-trait-types"class="sidebar-link">Built-in trait types</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Traits.html#updating-traits-at-run-time"class="sidebar-link">Updating traits at run-time</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Traits.html#define-new-trait-type"class="sidebar-link">Define new Trait type</a></li></ul></li><li><ahref="/docs/modules/Style-manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/modules/Storage.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/modules/Plugins.html"class="sidebar-link">Plugins</a></li></ul></div></li><li><divclass="sidebar-group"><pclass="sidebar-heading"><span>Guides</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/guides/Replace-Rich-Text-Editor.html"class="sidebar-link">Replace Rich Text Editor</a></li><li><ahref="/docs/guides/Custom-CSS-parser.html"class="sidebar-link">Use Custom CSS Parser</a></li></ul></div></li></ul></div><divclass="page"><divclass="content"><h1id="trait-manager"><ahref="#trait-manager"aria-hidden="true"class="header-anchor">#</a> Trait Manager</h1><p>In GrapesJS, Traits define different parameters and behaviors of a component. The user generally will see traits as the <em>Settings</em> of a component. A common use of traits is to customize element attributes (eg. <code>placeholder</code> for <code><input></code>) or you can also bind them to the properties of your components and react on their changes.</p><divclass="warning custom-block"><pclass="custom-block-title">WARNING</p><p>This guide is referring to GrapesJS v0.15.3 or higher.<br><br>
<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><divid="native-carbon"class="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/"class="sidebar-link">Introduction</a></li><li><ahref="/docs/getting-started.html"class="sidebar-link">Getting Started</a></li><li><divclass="sidebar-group"><pclass="sidebar-heading open"><span>Modules</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/modules/Assets.html"class="sidebar-link">Assets</a></li><li><ahref="/docs/modules/Blocks.html"class="sidebar-link">Blocks</a></li><li><ahref="/docs/modules/Commands.html"class="sidebar-link">Commands</a></li><li><ahref="/docs/modules/Components.html"class="sidebar-link">Components</a></li><li><ahref="/docs/modules/Components-js.html"class="sidebar-link">Components & JS</a></li><li><ahref="/docs/modules/Traits.html"class="active sidebar-link">Traits</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/modules/Traits.html#add-traits-to-components"class="sidebar-link">Add Traits to Components</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Traits.html#built-in-trait-types"class="sidebar-link">Built-in trait types</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Traits.html#updating-traits-at-run-time"class="sidebar-link">Updating traits at run-time</a></li><liclass="sidebar-sub-header"><ahref="/docs/modules/Traits.html#define-new-trait-type"class="sidebar-link">Define new Trait type</a></li></ul></li><li><ahref="/docs/modules/Style-manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/modules/Storage.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/modules/Plugins.html"class="sidebar-link">Plugins</a></li></ul></div></li><li><divclass="sidebar-group"><pclass="sidebar-heading"><span>Guides</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/guides/Replace-Rich-Text-Editor.html"class="sidebar-link">Replace Rich Text Editor</a></li><li><ahref="/docs/guides/Custom-CSS-parser.html"class="sidebar-link">Use Custom CSS Parser</a></li></ul></div></li></ul></div><divclass="page"><divclass="content"><h1id="trait-manager"><ahref="#trait-manager"aria-hidden="true"class="header-anchor">#</a> Trait Manager</h1><p>In GrapesJS, Traits define different parameters and behaviors of a component. The user generally will see traits as the <em>Settings</em> of a component. A common use of traits is to customize element attributes (eg. <code>placeholder</code> for <code><input></code>) or you can also bind them to the properties of your components and react on their changes.</p><divclass="warning custom-block"><pclass="custom-block-title">WARNING</p><p>This guide is referring to GrapesJS v0.15.5 or higher.<br><br>
To get a better understanding of the content in this guide we recommend reading <ahref="/docs/modules/Components.html">Components</a> first</p></div><p></p><divclass="table-of-contents"><ul><li><ahref="#add-traits-to-components">Add Traits to Components</a></li><li><ahref="#built-in-trait-types">Built-in trait types</a><ul><li><ahref="#text">Text</a></li><li><ahref="#number">Number</a></li><li><ahref="#checkbox">Checkbox</a></li><li><ahref="#select">Select</a></li><li><ahref="#color">Color</a></li><li><ahref="#button">Button</a></li></ul></li><li><ahref="#updating-traits-at-run-time">Updating traits at run-time</a></li><li><ahref="#define-new-trait-type">Define new Trait type</a><ul><li><ahref="#create-element">Create element</a></li><li><ahref="#update-layout">Update layout</a></li><li><ahref="#bind-to-component">Bind to component</a></li><li><ahref="#result">Result</a></li><li><ahref="#integrate-external-ui-components">Integrate external UI components</a></li></ul></li></ul></div><p></p><h2id="add-traits-to-components"><ahref="#add-traits-to-components"aria-hidden="true"class="header-anchor">#</a> Add Traits to Components</h2><p>Generally you define traits on the definition of your new custom components (or by extending another one). Let's see in this example how to make inputs more customizable by the editor.</p><p>All components, by default, contain two traits: <code>id</code> and <code>title</code> (at the moment of writing). So, if you select an input and open the Settings panel you will see this:</p><imgsrc="/docs/default-traits.png"><p>We can start by creating a new custom <code>input</code> component in this way:</p><divclass="language-js extra-class"><preclass="language-js"><code>editor<spanclass="token punctuation">.</span>DomComponents<spanclass="token punctuation">.</span><spanclass="token function">addType</span><spanclass="token punctuation">(</span><spanclass="token string">'input'</span><spanclass="token punctuation">,</span><spanclass="token punctuation">{</span>
Artur Arseniev
7 years ago