diff --git a/docs/modules/Traits.md b/docs/modules/Traits.md index 5ed6d562f..2eb8f02d9 100644 --- a/docs/modules/Traits.md +++ b/docs/modules/Traits.md @@ -144,8 +144,8 @@ GrapesJS comes along with few built-in types that you can use to define your tra * **Text** - Simple text input ```js { - type: 'text', - name: 'my-trait', // Available for all traits + type: 'text', // If you don't specify the type, the `text` is the default one + name: 'my-trait', // Required and available for all traits label: 'My trait', // The label you will see near the input placeholder: 'Insert text', // Placeholder to show inside the input } @@ -189,6 +189,17 @@ GrapesJS comes along with few built-in types that you can use to define your tra } ``` +## Updating traits at run-time + +If you need to change some trait on your component you can update it wherever you want by using [Component API](/api/component.html) + +The trait is a simple property of the component so to get the complete list of current traits you can use this: + +```js +const traits = editor.getSelected().get('traits'); +traits.forEach(trait => console.log(trait.props())) +``` + ## Define new Trait type diff --git a/src/trait_manager/model/Trait.js b/src/trait_manager/model/Trait.js index 404eb27d0..85368d003 100644 --- a/src/trait_manager/model/Trait.js +++ b/src/trait_manager/model/Trait.js @@ -33,6 +33,14 @@ export default Backbone.Model.extend({ } }, + /** + * Return all the propeties + * @returns {Object} + */ + props() { + return this.attributes; + }, + targetUpdated() { const value = this.getTargetValue(); this.set({ value }, { fromTarget: 1 });