grapesjs/docs/api/selector_manager.md

SelectorManager

Selectors in GrapesJS are used in CSS Composer inside Rules and in Components as classes. To get better this concept let's take a look at this code:

span > #send-btn.btn{
 ...
}

<span>
  <button id="send-btn" class="btn"></button>
</span>

In this scenario we get: span -> selector of type tag send-btn -> selector of type id btn -> selector of type class

So, for example, being btn the same class entity it'll be easier to refactor and track things.

Before using methods you should get first the module from the editor instance, in this way:

var selectorManager = editor.SelectorManager;

Parameters

• config Object Configurations
  • config.selectors Array<Object> Default selectors (optional, default [])
  • config.states Array<Object> Default states (optional, default [])
  • config.label String Classes label (optional, default 'Classes')
  • config.statesLabel String The empty state label (optional, default '- State -')

Examples

...
{
 selectors: [
   {name:'myselector1'},
    ...
 ],
 states: [{
   name: 'hover', label: 'Hover'
 },{
   name: 'active', label: 'Click'
 }],
 statesLabel: '- Selecte State -',
}

Returns this

add

Add a new selector to collection if it's not already exists. Class type is a default one

Parameters

• name String Selector name
• opts Object Selector options (optional, default {})
  • opts.label String Label for the selector, if it's not provided the label will be the same as the name (optional, default '')
  • opts.type String Type of the selector. At the moment, only 'class' (1) is available (optional, default 1)

Examples

var selector = selectorManager.add('selectorName');
// Same as
var selector = selectorManager.add('selectorName', {
  type: 1,
  label: 'selectorName'
});

Returns Model

addClass

Add class selectors

Parameters

• classes (Array | string) Array or string of classes

Examples

sm.addClass('class1');
sm.addClass('class1 class2');
sm.addClass(['class1', 'class2']);
// -> [SelectorObject, ...]

Returns Array Array of added selectors

get

Get the selector by its name

Parameters

• name String Selector name
• type (optional, default Selector.TYPE_CLASS)
• tyoe String Selector type

Examples

var selector = selectorManager.get('selectorName');

Returns (Model | null)

getAll

Get all selectors

Returns Collection