# 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{
  <button id="send-btn" class="btn"></button>

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

# setState

Change the selector state

# Parameters

# Examples


Returns this

# getState

Get the current selector state

Returns String

# 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
  • 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

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 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

  • name String Selector name to escape

Returns String Escaped name