grapesjs/docs/api/trait_manager.md

Traits

You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object

const editor = grapesjs.init({
 traitManager: {
   // options
 }
})

Once the editor is instantiated you can use the API below and listen to the events. Before using these methods, you should get the module from the instance.

// Listen to events
editor.on('trait:value', () => { ... });

// Use the Trait Manager API
const tm = editor.Traits;
tm.select(...)

Available Events

• trait:select New traits selected (eg. by changing a component).

editor.on('trait:select', ({ traits, component }) => { ... });

• trait:value Trait value updated.

editor.on('trait:value', ({ trait, component, value }) => { ... });

• trait:category:update Trait category updated.

editor.on('trait:category:update', ({ category, changes }) => { ... });

• trait:custom Event to use in case of custom Trait Manager UI.

editor.on('trait:custom', ({ container }) => { ... });

• trait Catch-all event for all the events mentioned above. An object containing all the available data about the triggered event is passed as an argument to the callback.

editor.on('trait', ({ event, model, ... }) => { ... });

getConfig

Get configuration object

Returns Object

select

Select traits from a component.

Parameters

• component Component

Examples

tm.select(someComponent);

getCategories

Get trait categories from the currently selected component.

Examples

const traitCategories: Category[] = tm.getCategories();

Returns Array<Category>

getTraits

Get traits from the currently selected component.

Examples

const currentTraits: Trait[] = tm.getTraits();

Returns Array<Trait>

getTraitsByCategory

Get traits by category from the currently selected component.

Parameters

• traits Array<Trait>?

Examples

tm.getTraitsByCategory();
// Returns an array of items of this type
// > { category?: Category; items: Trait[] }

// NOTE: The item without category is the one containing traits without category.

// You can also get the same output format by passing your own array of Traits
const myFilteredTraits: Trait[] = [...];
tm.getTraitsByCategory(myFilteredTraits);

Returns Array<TraitsByCategory>

getComponent

Get component from the currently selected traits.

Examples

tm.getComponent();
// Component {}

addType

Add new trait type. More about it here: Define new Trait type.

Parameters

• name string Type name.
• methods Object Object representing the trait.