## 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: ```css span > #send-btn.btn{ ... } ``` ```html ``` 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][1] ```js const editor = grapesjs.init({ selectorManager: { // options } }) ``` Once the editor is instantiated you can use its API and listen to its events. Before using these methods, you should get the module from the instance. ```js // Listen to events editor.on('selector:add', (selector) => { ... }); // Use the API const sm = editor.Selectors; sm.add(...); ``` ## Available Events * `selector:add` - Selector added. The [Selector] is passed as an argument to the callback. * `selector:remove` - Selector removed. The [Selector] is passed as an argument to the callback. * `selector:update` - Selector updated. The [Selector] and the object containing changes are passed as arguments to the callback. * `selector:state` - State changed. Passes the new state value as an argument. * `selector` - 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. ## Methods * [getConfig][2] * [add][3] * [addClass][4] * [get][5] * [getAll][6] * [setState][7] * [getState][8] [Selector]: selector.html ## init Get configuration object ### Parameters * `conf` (optional, default `{}`) Returns **[Object][9]** ## setState Change the selector state ### Parameters * `value` **[String][10]** State value ### Examples ```javascript selectorManager.setState('hover'); ``` Returns **this** ## getState Get the current selector state Returns **[String][10]** ## add Add a new selector to collection if it's not already exists. Class type is a default one ### Parameters * `name` **([String][10] | [Array][11])** Selector/s name * `opts` **[Object][9]** Selector options (optional, default `{}`) * `opts.label` **[String][10]** Label for the selector, if it's not provided the label will be the same as the name (optional, default `''`) * `opts.type` **[String][10]** Type of the selector. At the moment, only 'class' (1) is available (optional, default `1`) ### Examples ```javascript 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][11])** ## addClass Add class selectors ### Parameters * `classes` **([Array][11] | [string][10])** Array or string of classes ### Examples ```javascript sm.addClass('class1'); sm.addClass('class1 class2'); sm.addClass(['class1', 'class2']); // -> [SelectorObject, ...] ``` Returns **[Array][11]** Array of added selectors ## get Get the selector by its name ### Parameters * `name` **([String][10] | [Array][11])** Selector name * `type` **[String][10]** Selector type ### Examples ```javascript const selector = selectorManager.get('selectorName'); // or get an array const selectors = selectorManager.get(['class1', 'class2']); ``` Returns **(Model | [Array][11])** ## getAll Get all selectors Returns **Collection** ## escapeName Return escaped selector name ### Parameters * `name` **[String][10]** Selector name to escape Returns **[String][10]** Escaped name [1]: https://github.com/artf/grapesjs/blob/master/src/selector_manager/config/config.js [2]: #getconfig [3]: #add [4]: #addclass [5]: #get [6]: #getall [7]: #setstate [8]: #getstate [9]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object [10]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String [11]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array