API Style Manager

Artur Arseniev edited this page Jun 18, 2016 · 2 revisions

StyleManager

With Style Manager you basically build categories (called sectors) of CSS properties which could be used to custom components and classes. You can init the editor with all sectors and properties via configuration

var editor = grapesjs.init({
    ...
 styleManager: {...} // Check below for the possible properties
    ...
});

Before using methods you should get first the module from the editor instance, in this way:

var styleManager = editor.StyleManager;

Parameters

  • config Object Configurations
    • config.sectors Array.<Object>= Array of possible sectors (optional, default [])

Examples

...
styleManager: {
    sectors: [{
        id: 'dim',
     name: 'Dimension',
     properties: [{
        name: 'Width',
        property: 'width',
        type: 'integer',
        units: ['px', '%'],
        defaults: 'auto',
        min: 0,
}],
    }],
}
...

addProperty

Add property to the sector identified by id

Parameters

  • sectorId string Sector id
  • property Object Property object
    • property.name string= Name of the property (optional, default '')
    • property.property string= CSS property, eg. min-height (optional, default '')
    • property.type string= Type of the property: integer | radio | select | color | file | composite | stack (optional, default '')
    • property.units Array.<string>= Unit of measure available, eg. ['px','%','em']. Only for integer type (optional, default [])
    • property.unit string= Default selected unit from units. Only for integer type (optional, default '')
    • property.min number= Min possible value. Only for integer type (optional, default null)
    • property.max number= Max possible value. Only for integer type (optional, default null)
    • property.defaults string= Default value (optional, default '')
    • property.info string= Some description (optional, default '')
    • property.icon string= Class name. If exists no text will be displayed (optional, default '')
    • property.preview Boolean= Show layers preview. Only for stack type (optional, default false)
    • property.functionName string= Indicates if value need to be wrapped in some function, for istance transform: rotate(90deg) (optional, default '')
    • property.properties Array.<Object>= Nested properties for composite and stack type (optional, default [])
    • property.layers Array.<Object>= Layers for stack properties (optional, default [])
    • property.list Array.<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

addSector

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

Parameters

  • id string Sector id
  • sector Object Object representing sector
    • sector.name string= Sector's label (optional, default '')
    • sector.open Boolean= Indicates if the sector should be opened (optional, default true)
    • sector.properties Array.<Object>= Array of properties (optional, default [])

Examples

var sector = styleManager.addSector('mySector',{
  name: 'My sector',
  open: true,
  properties: [{ name: 'My property'}]
});

Returns Sector Added Sector

getProperties

Get properties of the sector

Parameters

Examples

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

Returns Properties Collection of properties

getProperty

Get property by its CSS name and sector id

Parameters

  • sectorId string Sector id
  • name string CSS property name, eg. 'min-height'

Examples

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

Returns (Property|null)

getSector

Get sector by id

Parameters

Examples

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

Returns (Sector|null)

getSectors

Get all sectors

Returns Sectors Collection of sectors

render

Render sectors and properties

Returns HTMLElement