StyleManager

With Style Manager you build categories (called sectors) of CSS properties which could be used to customize the style of components. You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object

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

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

const styleManager = editor.StyleManager;

getConfig

Get configuration object

Returns Object

addSector

Add new sector to the collection. If the sector with the same id already exists, that one will be returned

Parameters

  • idstring Sector id
  • sectorObject Object representing sector
    • sector.namestring Sector's label (optional, default '')
    • sector.openBoolean Indicates if the sector should be opened (optional, default true)
    • sector.propertiesArray<Object> Array of properties (optional, default [])
  • opts (optional, default {})
  • optionsObject Options (optional, default {})

Examples

var sector = styleManager.addSector('mySector',{
  name: 'My sector',
  open: true,
  properties: [{ name: 'My property'}]
}, { at: 0 });
// With `at: 0` we place the new sector at the beginning of the collection

Returns Sector Added Sector

getSector

Get sector by id

Parameters

  • idstring Sector id
  • opts (optional, default {})

Examples

var sector = styleManager.getSector('mySector');

Returns (Sector | null)

removeSector

Remove a sector by id

Parameters

Examples

const removed = styleManager.removeSector('mySector');

Returns Sector Removed sector

getSectors

Get all sectors

Returns Sectors Collection of sectors

addProperty

Add property to the sector identified by id

Parameters

  • sectorIdstring Sector id
  • propertyObject Property object
    • property.namestring Name of the property (optional, default '')
    • property.propertystring CSS property, eg. min-height (optional, default '')
    • property.typestring Type of the property: integer | radio | select | color | file | composite | stack (optional, default '')
    • property.unitsArray<string> Unit of measure available, eg. ['px','%','em']. Only for integer type (optional, default [])
    • property.unitstring Default selected unit from units. Only for integer type (optional, default '')
    • property.minnumber Min possible value. Only for integer type (optional, default null)
    • property.maxnumber Max possible value. Only for integer type (optional, default null)
    • property.defaultsstring Default value (optional, default '')
    • property.infostring Some description (optional, default '')
    • property.iconstring Class name. If exists no text will be displayed (optional, default '')
    • property.previewBoolean Show layers preview. Only for stack type (optional, default false)
    • property.functionNamestring Indicates if value need to be wrapped in some function, for istance transform: rotate(90deg) (optional, default '')
    • property.propertiesArray<Object> Nested properties for composite and stack type (optional, default [])
    • property.layersArray<Object> Layers for stack properties (optional, default [])
    • property.listArray<Object> List of possible options for radio and select types (optional, default [])

Examples

var property = styleManager.addProperty('mySector',{
  name: 'Minimum height',
  property: 'min-height',
  type: 'select',
  defaults: '100px',
  list: [{
    value: '100px',
    name: '100',
   },{
     value: '200px',
     name: '200',
   }],
});

Returns (Property | null) Added Property or null in case sector doesn't exist

getProperty

Get property by its CSS name and sector id

Parameters

  • sectorIdstring Sector id
  • namestring CSS property name, eg. 'min-height'

Examples

var property = styleManager.getProperty('mySector','min-height');

Returns (Property | null)

removeProperty

Remove a property from the sector

Parameters

  • sectorIdstring Sector id
  • namestring CSS property name, eg. 'min-height'

Examples

const property = styleManager.removeProperty('mySector', 'min-height');

Returns Property Removed property

getProperties

Get properties of the sector

Parameters

Examples

var properties = styleManager.getProperties('mySector');

Returns Properties Collection of properties

getModelToStyle

Get what to style inside Style Manager. If you select the component without classes the entity is the Component itself and all changes will go inside its 'style' property. Otherwise, if the selected component has one or more classes, the function will return the corresponding CSS Rule

Parameters

  • modelModel

Returns Model

addType

Add new property type

Parameters

  • idstring Type ID
  • definitionObject Definition of the type. Each definition contains model (business logic), view (presentation logic) and isType function which recognize the type of the passed entity

Examples

styleManager.addType('my-type', {
 model: {},
 view: {},
 isType: (value) => {
   if (value && value.type == 'my-type') {
     return value;
   }
 },
})

getType

Get type

Parameters

Returns Object Type definition

getTypes

Get all types

Returns Array

createType

Create new property from type

Parameters

  • idstring Type ID
  • optionsObject Options (optional, default {})
    • options.modelObject Custom model object (optional, default {})
    • options.viewObject Custom view object (optional, default {})

Examples

const propView = styleManager.createType('integer', {
 model: {units: ['px', 'rem']}
});
propView.render();
propView.model.on('change:value', ...);
someContainer.appendChild(propView.el);

Returns PropertyView

setTarget

Select different target for the Style Manager. It could be a Component, CSSRule, or a string of any CSS selector

Parameters

  • target(Component | CSSRule | String)
  • opts

Returns Styleable A Component or CSSRule

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