ref API Editor - rzning/grapesjs GitHub Wiki

GrapesJS API Editor

Editor

Editor class contains the top level API which you'll probably use to custom the editor or extend it with plugins.

  • contains - 包含
  • probably - 可能
  • custom - 定制
  • extend - 扩展

You get the Editor instance on init method

  • instance - 实例
var editor = grapesjs.init({...});

Parameters 参数

  • config Object Configurations
配置项 类型 名称 默认值 说明
container string 容器 指定编辑器的容器，如：'#myEditor'
components string|Array.Object 组件 '' 可选，HTML 片段或组件（components）对象
style string|Array.Object 样式 '' 可选，CSS 片段或规则（rules）对象
fromElement Boolean 来自元素 false 可选，若为 true 则将从被选取的容器中获取 HTML 和 CSS
copyPaste Boolean 复制粘贴 true 可选，使能/禁用复制（ctrl+c）和粘贴（ctrl+v）组件功能
undoManager Boolean 撤销 true 可选，使能/禁用撤销管理器
autorender Boolean 自动渲染 true 可选，若为 true 则在初始化时渲染编辑器
noticeOnUnload Boolean 卸载后提示 true 可选，若为 true 则在弹出提示信息之前卸载页面
height string 高度 '900px' 可选，编辑器容器的高度
width string 宽度 '100%' 可选，编辑器容器的宽度
storage Object 存储 {} 可选，存储管理器配置
styleManager Object 样式管理器 {} 可选，样式管理器配置
commands Object 命令 {} 可选，命令配置
domComponents Object DOM 组件 {} 可选，组件配置
panels Object 面板 {} 可选，面板配置
showDevices Boolean 显示设备 true 可选，若为 true 则在样式管理器面板现在一个可用设备选项
defaultCommand string 默认命令 select-comp 在没有其他命令执行时执行的命令
plugins Array 插件 {} 可选，开始执行时的插件列表
pluginsOpts Object 插件选项 {} 可选，插件自定义选项

例子

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 ~ 返回容器元素，在初始化方法中使用 container 表示。

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

参数

例子

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

参数

  • style (Array.|Object|string) CSS string or style model

例子

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

Returns this

stopCommand

Stop the command if stop method was provided

参数

  • id string Command ID
  • options Object Custom options

例子

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

store

Store data to the current storage

返回 Object Stored data

trigger

Trigger event

Parameters

  • event string Event to trigger

Returns this

Add a custom footer
⚠️ **GitHub.com Fallback** ⚠️