SelectorManager

Selectors in GrapesJS are used in CSS Composer inside Rules and in Components as classes. To illustrate 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.

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

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

Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance

const selectorManager = editor.SelectorManager;

getConfig

Get configuration object

Returns Object

add

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

Parameters

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

Examples

const selector = selectorManager.add('selectorName');
// Same as
const selector = selectorManager.add('selectorName', {
  type: 1,
  label: 'selectorName'
});
// Multiple selectors
const selectors = selectorManager.add(['.class1', '.class2', '#id1']);

Returns (Model | Array)

addClass

Add class selectors

Parameters

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

Examples

const selector = selectorManager.get('selectorName');
// or get an array
const selectors = selectorManager.get(['class1', 'class2']);

Returns (Model | Array)

getAll

Get all selectors

Returns Collection

escapeName

Return escaped selector name

Parameters

  • nameString Selector name to escape

Returns String Escaped name

Last Updated: 8/13/2019, 6:32:25 PM