API Editor

Artur Arseniev edited this page Aug 8, 2016 · 2 revisions

Editor

Editor class contains the top level API which you'll probably use to custom the editor or extend it with plugins. You get the Editor instance on init method

var editor = grapesjs.init({...});

Parameters

  • config Object Configurations
    • config.container string ='' Selector for the editor container, eg. '#myEditor'
    • config.components (string|Array.<Object>)= HTML string or object of components (optional, default '')
    • config.style (string|Array.<Object>)= CSS string or object of rules (optional, default '')
    • config.fromElement Boolean= If true, will fetch HTML and CSS from selected container (optional, default false)
    • config.copyPaste Boolean= Enable/Disable the possibility to copy(ctrl + c) & paste(ctrl + v) components (optional, default true)
    • config.undoManager Boolean= Enable/Disable undo manager (optional, default true)
    • config.autorender Boolean= If true renders editor on init (optional, default true)
    • config.noticeOnUnload Boolean= Enable/Disable alert message before unload the page (optional, default true)
    • config.height string= Height for the editor container (optional, default '900px')
    • config.width string= Width for the editor container (optional, default '100%')
    • config.storage Object= Storage manager configuration, see the relative documentation (optional, default {})
    • config.styleManager Object= Style manager configuration, see the relative documentation (optional, default {})
    • config.commands Object= Commands configuration, see the relative documentation (optional, default {})
    • config.domComponents Object= Components configuration, see the relative documentation (optional, default {})
    • config.panels Object= Panels configuration, see the relative documentation (optional, default {})
    • config.showDevices Object= If true render a select of available devices inside style manager panel (optional, default true)
    • config.defaultCommand string= Command to execute when no other command is running (optional, default 'select-comp')
    • config.plugins Array= Array of plugins to execute on start (optional, default [])
    • config.pluginsOpts Object= Custom options for plugins (optional, default {})

Examples

var editor = grapesjs.init({
  container : '#gjs',
  components: '<div class="txt-red">Hello world!</div>',
  style: '.txt-red{color: red}',
});

getComponents

Returns components in JSON format object

Returns Object

getConfig

Returns configuration object

Returns Object

getContainer

Returns container element. The one which was indicated as 'container' on init method

Returns HTMLElement

getCss

Returns CSS built inside canvas

Returns string CSS string

getDevice

Return the actual active device

Examples

var device = editor.getDevice();
console.log(device);
// 'Tablet'

Returns string Device name

getDeviceModel

Returns device model by name

Returns (Device|null)

getHtml

Returns HTML built inside canvas

Returns string HTML string

getSelected

Returns selected component, if there is one

Returns grapesjs.Component

getStyle

Returns style in JSON format object

Returns Object

load

Load data from the current storage

Returns Object Stored data

on

Attach event

Parameters

Returns this

render

Render editor

Returns HTMLElement

runCommand

Execute command

Parameters

Examples

editor.runCommand('myCommand', {someValue: 1});

setComponents

Set components inside editor's canvas. This method overrides actual components

Parameters

Examples

editor.setComponents('<div class="cls">New component</div>');
// or
editor.setComponents({
 type: 'text',
  classes:['cls'],
  content: 'New component'
});

Returns this

setDevice

Set device to the editor. If the device exists it will change the canvas to the proper width

Examples

editor.setDevice('Tablet');

Returns this

setStyle

Set style inside editor's canvas. This method overrides actual style

Parameters

Examples

editor.setStyle('.cls{color: red}');
//or
editor.setStyle({
  selectors: ['cls']
  style: { color: 'red' }
});

Returns this

stopCommand

Stop the command if stop method was provided

Parameters

Examples

editor.stopCommand('myCommand', {someValue: 1});

store

Store data to the current storage

Returns Object Stored data

trigger

Trigger event

Parameters

  • event string Event to trigger

Returns this