API Selector Manager

Artur Arseniev edited this page Aug 30, 2016 · 1 revision

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 the 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
    • 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' is available (optional, default 'class')

Examples

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

Returns Model

get

Get the selector by its name

Parameters

Examples

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

Returns (Model|null)

getAll

Get all selectors

Returns Collection