GrapesJS

# Traits

You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)

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 }) => { ... });

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 (opens new window)

# select

Select traits from a component.

# Parameters

# Examples

tm.select(someComponent);

# getCategories

Get trait categories from the currently selected component.

# Examples

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

Returns Array (opens new window)<Category>

# getTraits

Get traits from the currently selected component.

# Examples

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

Returns Array (opens new window)<Trait>

# getTraitsByCategory

Get traits by category from the currently selected component.

# Parameters

# 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 (opens new window)<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 (opens new window).

# Parameters

← ‍ ‍ ‍ Trait →