grapesjs/docs/api/editor.md

Editor

Editor contains the top level API which you'll probably use to customize the editor or extend it with plugins. You get the Editor instance on init method and you can pass options via its Configuration Object

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

Available Events

• update Event triggered on any change of the project (eg. component added/removed, style changes, etc.)

editor.on('update', () => { ... });

• undo Undo executed.

editor.on('undo', () => { ... });

• redo Redo executed.

editor.on('redo', () => { ... });

• load Editor is loaded. At this stage, the project is loaded in the editor and elements in the canvas are rendered.

editor.on('load', () => { ... });

• project:load Project JSON loaded in the editor. The event is triggered on the initial load and on the editor.loadProjectData method.

editor.on('project:load', ({ project, initial }) => { ... });

• project:get Event triggered on request of the project data. This can be used to extend the project with custom data.

editor.on('project:get', ({ project }) => { project.myCustomKey = 'value' });

• log Log message triggered.

editor.on('log', (msg, opts) => { ... });

• telemetry:init Initial telemetry data are sent.

editor.on('telemetry:init', () => { ... });

• destroy Editor started destroy (on editor.destroy()).

editor.on('destroy', () => { ... });

• destroyed Editor destroyed.

editor.on('destroyed', () => { ... });

Components

Check the Components module.

Keymaps

Check the Keymaps module.

Style Manager

Check the Style Manager module.

Storage

Check the Storage module.

Canvas

Check the Canvas module.

RTE

Check the Rich Text Editor module.

Commands

Check the Commands module.

Selectors

Check the Selectors module.

Blocks

Check the Blocks module.

Assets

Check the Assets module.

Modal

Check the Modal module.

Devices

Check the Devices module.

Parser

Check the Parser module.

Pages

Check the Pages module.

Methods

getConfig

Returns configuration object

Parameters

• prop P?

Returns any Returns the configuration object or the value of the specified property

getHtml

Returns HTML built inside canvas

Parameters

• opts Object Options (optional, default {})

  • opts.component Component? Return the HTML of a specific Component
  • opts.cleanId Boolean Remove unnecessary IDs (eg. those created automatically) (optional, default false)

Returns string HTML string

getCss

Returns CSS built inside canvas

Parameters

• opts Object Options (optional, default {})

  • opts.component Component? Return the CSS of a specific Component
  • opts.json Boolean Return an array of CssRules instead of the CSS string (optional, default false)
  • opts.avoidProtected Boolean Don't include protected CSS (optional, default false)
  • opts.onlyMatched Boolean Return only rules matched by the passed component. (optional, default false)
  • opts.keepUnusedStyles Boolean Force keep all defined rules. Toggle on in case output looks different inside/outside of the editor. (optional, default false)

Returns (String | Array<CssRule>) CSS string or array of CssRules

getJs

Returns JS of all components

Parameters

• opts Object Options (optional, default {})

  • opts.component Component? Get the JS of a specific component

Returns String JS string

getComponents

Return the complete tree of components. Use getWrapper to include also the wrapper

Returns Components

getWrapper

Return the wrapper and its all components

Returns Component

setComponents

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

Parameters

• components (Array<Object> | Object | string) HTML string or components model
• opt Object the options object to be used by the [setComponents]em#setComponents method (optional, default {})

Examples

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

Returns this

addComponents

Add components

Parameters

• components (Array<Object> | Object | string) HTML string or components model

• opts Object Options

  • opts.avoidUpdateStyle Boolean If the HTML string contains styles, by default, they will be created and, if already exist, updated. When this option is true, styles already created will not be updated. (optional, default false)

Examples

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

Returns Array<Component>

getStyle

Returns style in JSON format object

Returns Object

setStyle

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

Parameters

• style (Array<Object> | Object | string) CSS string or style model
• opt any (optional, default {})

Examples

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

Returns this

addStyle

Add styles to the editor

Parameters

• style (Array<Object> | Object | string) CSS string or style model
• opts (optional, default {})

Examples

editor.addStyle('.cls{color: red}');

Returns Array<CssRule> Array of created CssRule instances

getSelected

Returns the last selected component, if there is one

Returns Model

getSelectedAll

Returns an array of all selected components

Returns Array

getSelectedToStyle

Get a stylable entity from the selected component. If you select a component without classes the entity is the Component itself and all changes will go inside its 'style' attribute. Otherwise, if the selected component has one or more classes, the function will return the corresponding CSS Rule

Returns Model

select

Select a component

Parameters

• el (Component | HTMLElement) Component to select

• opts Object? Options

  • opts.scroll Boolean? Scroll canvas to the selected element

Examples

// Select dropped block
editor.on('block:drag:stop', function(model) {
 editor.select(model);
});

Returns this

selectAdd

Add component to selection

Parameters

• el (Component | HTMLElement | Array) Component to select

Examples

editor.selectAdd(model);

Returns this

selectRemove

Remove component from selection

Parameters

• el (Component | HTMLElement | Array) Component to select

Examples

editor.selectRemove(model);

Returns this

selectToggle

Toggle component selection

Parameters

• el (Component | HTMLElement | Array) Component to select

Examples

editor.selectToggle(model);

Returns this

getEditing

Returns, if active, the Component enabled in rich text editing mode.

Examples

const textComp = editor.getEditing();
if (textComp) {
 console.log('HTML: ', textComp.toHTML());
}

Returns (Component | null)

setDevice

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

Parameters

• name string Name of the device

Examples

editor.setDevice('Tablet');

Returns this

getDevice

Return the actual active device

Examples

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

Returns string Device name

runCommand

Execute command

Parameters

• id string Command ID
• options Object Custom options (optional, default {})

Examples

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

Returns any The return is defined by the command

stopCommand

Stop the command if stop method was provided

Parameters

• id string Command ID
• options Object Custom options (optional, default {})

Examples

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

Returns any The return is defined by the command

store

Store data to the current storage. This will reset the counter of changes (editor.getDirtyCount()).

Parameters

• options Object? Storage options.

Examples

const storedData = await editor.store();

Returns Object Stored data.

load

Load data from the current storage.

Parameters

• options Object? Storage options.

• loadOptions Object Load options. (optional, default {})

  • loadOptions.clear Boolean Clear the editor state (eg. dirty counter, undo manager, etc.). (optional, default false)

Examples

const data = await editor.load();

Returns Object Loaded data.

getProjectData

Get the JSON project data, which could be stored and loaded back with editor.loadProjectData(json)

Examples

console.log(editor.getProjectData());
// { pages: [...], styles: [...], ... }

Returns Object

loadProjectData

Load data from the JSON project

Parameters

• data Object Project to load

Examples

editor.loadProjectData({ pages: [...], styles: [...], ... })

getContainer

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

Returns HTMLElement

getDirtyCount

Return the count of changes made to the content and not yet stored. This count resets at any store()

Returns number

clearDirtyCount

Reset the counter of changes.

refresh

Update editor dimension offsets

This method could be useful when you update, for example, some position of the editor element (eg. canvas, panels, etc.) with CSS, where without refresh you'll get misleading position of tools

Parameters

• opts {tools: boolean?}?

• options Object? Options

  • options.tools Boolean Update the position of tools (eg. rich text editor, component highlighter, etc.) (optional, default false)

setCustomRte

Replace the built-in Rich Text Editor with a custom one.

Parameters

• obj Object Custom RTE Interface

Examples

editor.setCustomRte({
  // Function for enabling custom RTE
  // el is the HTMLElement of the double clicked Text Component
  // rte is the same instance you have returned the first time you call
  // enable(). This is useful if need to check if the RTE is already enabled so
  // ion this case you'll need to return the RTE and the end of the function
  enable: function(el, rte) {
    rte = new MyCustomRte(el, {}); // this depends on the Custom RTE API
    ...
    return rte; // return the RTE instance
  }

  // Disable the editor, called for example when you unfocus the Text Component
 disable: function(el, rte) {
    rte.blur(); // this depends on the Custom RTE API
 }

// Called when the Text Component is focused again. If you returned the RTE instance
// from the enable function, the enable won't be called again instead will call focus,
// in this case to avoid double binding of the editor
 focus: function (el, rte) {
  rte.focus(); // this depends on the Custom RTE API
 }
});

setCustomParserCss

Replace the default CSS parser with a custom one. The parser function receives a CSS string as a parameter and expects an array of CSSRule objects as a result. If you need to remove the custom parser, pass null as the argument

Parameters

• parser (Function | null) Parser function

Examples

editor.setCustomParserCss(css => {
 const result = [];
 // ... parse the CSS string
 result.push({
   selectors: '.someclass, div .otherclass',
   style: { color: 'red' }
 })
 // ...
 return result;
});

Returns this

setDragMode

Change the global drag mode of components. To get more about this feature read: https://github.com/GrapesJS/grapesjs/issues/1936

Parameters

• value String Drag mode, options: 'absolute' | 'translate'

Returns this

log

Trigger event log message

Parameters

• msg any Message to log

• opts Object Custom options (optional, default {})

  • opts.ns String Namespace of the log (eg. to use in plugins) (optional, default '')
  • opts.level String Level of the log, debug, info, warning, error (optional, default 'debug')

Examples

editor.log('Something done!', { ns: 'from-plugin-x', level: 'info' });
// This will trigger following events
// `log`, `log:info`, `log-from-plugin-x`, `log-from-plugin-x:info`
// Callbacks of those events will always receive the message and
// options, as arguments, eg:
// editor.on('log:info', (msg, opts) => console.info(msg, opts))

Returns this

t

Translate label

Parameters

• args ...Array<any>

• key String Label to translate

• opts Object? Options for the translation

  • opts.params Object? Params for the translation
  • opts.noWarn Boolean? Avoid warnings in case of missing resources

Examples

editor.t('msg');
// use params
editor.t('msg2', { params: { test: 'hello' } });
// custom local
editor.t('msg2', { params: { test: 'hello' } l: 'it' });

Returns String

on

Attach event

Parameters

• event string Event name
• callback Function Callback function

Returns this

once

Attach event and detach it after the first run

Parameters

• event string Event name
• callback Function Callback function

Returns this

off

Detach event

Parameters

• event string Event name
• callback Function Callback function

Returns this

trigger

Trigger event

Parameters

• event string Event to trigger
• args ...Array<any>

Returns this

destroy

Destroy the editor

render

Render editor

Returns HTMLElement

onReady

Trigger a callback once the editor is loaded and rendered. The callback will be executed immediately if the method is called on the already rendered editor.

Parameters

• clb Function Callback to trigger

Examples

editor.onReady(() => {
  // perform actions
});

html

Print safe HTML by using ES6 tagged template strings.

Parameters

• literals Array<String>
• substs Array<String>

Examples

const unsafeStr = '<script>....</script>';
const safeStr = '<b>Hello</b>';
// Use `$${var}` to avoid escaping
const strHtml = editor.html`Escaped ${unsafeStr} unescaped $${safeStr}`;

Returns String