GrapesJs源码Panels模块学习

一、简介

Panels模块：Grapes编辑器的面板功能，通过一些配置，我们可以自定义GrapesJs编辑器的初始状态。

1.1 页面结构

1.2 DOM树结构

1.3 面板的代码结构

二、代码解读

panels的面板的代码分层4个部分：

config文件夹：基础配置文件
model文件夹: 模型
view文件夹
index.js文件

2.1 config.js

【stylePrefix】面板的样式前缀，会和base样式前缀拼接起来，base样式前缀在editor\config\config.js的stylePrefix中定义

【em】：editor的model
【delayBtnsShow】：// 加载子button时的延时时间（毫秒）
【defaults】面板的核心配置区域的配置（这里是默认的），grapesjs.init的时候去覆盖此配置。
- defaults是一个数组，其成员格式如下：
```
id: xxx
buttons: Array<buttonItemConfig>
```
- commands：命令按钮组配置
- options：功能按钮组配置
- views：显示按钮组配置
  - Open Style Manager ：样式配置管理器
  - Settings ： Trait Manager 相关功能
  - Open Layer Manager： DOM树
  - Open Blocks：组件库

2.1 model文件夹：为面板的view提供数据

具体说明：使用方法可以参考：wizardforcel.gitbooks.io/backbone-js…
Button.js
- defaults：一个按钮需要的基础数据模型
- initialize方法：当创建model实例时，可以传入属性初始值attributes，这些值会被设置到model上，如果定义了initialize函数，函数会在model创建后执行
Buttons.js：Button的数据集合，提供了4个方法
- deactivateAllExceptOne：控制面板中默认激活项
  - panels\model\Button.js中defaults.active 来当配置当前面板中的按钮是否需要全部激活
  - panels\config\config.js中defaults[i].buttons.active用来配置面板按钮组中某一个按钮是否是激活状态
- deactivateAll：当前面板中所有按钮全部激活
  - panels\model\Button.js中defaults.active 来当配置当前面板中的按钮是否需要全部激活
- disableAllButtons：是否需要禁用所有的按钮
  - panels\model\Button.js中defaults.disable 来当配置当前面板中的按钮是否需要全部禁用
- disableAllButtonsExceptOne：当所有按钮组全部禁用时，可以通过配置defaults[i].buttons.disable来启用其中一个按钮
  - panels\model\Button.js中defaults.disable 来当配置当前面板中的按钮是否需要全部禁用
  - panels\config\config.js中defaults[i].buttons.disable用来配置面板按钮组中某一个按钮是否需要禁用
Panel.js和Panels.js原理上是和Button.js和Buttons.js是一样的，他是把复杂的按钮单独抽离出去了。

2.2 view文件夹：视图文件夹，这里是展示以及和用户交互的部分

2.4 index.js：对外暴露面板的API

在编辑器初始化的时候，会自动的根据配置初始化面板的属性。我们可以在编辑器初始化的时候通过以下方式去定制面板的相关信息

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

当前对外暴露的API有8个：

getPanels：返回当前面板的集合

getPanelsEl：返回当前的面板集合，返回值是HTMLElement
getPanel：通过面板id获取一个panel，返回值是一个 Panel | null
```
panelManager.getPanel(面板id)
```

addPanel：向集合中添加一个新面板

panelManager.addPanel({
  id: 'myNewPanel',
 visible  : true,
 buttons  : [...],
})

removePanel：从面板集合中移除一个

panelManager.removePanel({
  id: 'myNewPanel',
 visible  : true,
 buttons  : [...],
});

addButton：通过面板id和按钮配置增加一个按钮

panelManager.addButton(面板id,{
  id: 'myNewButton',
  className: 'someClass',
  command: 'someCommand',
  attributes: { title: 'Some title'},
  active: false,
});

removeButton：通过面板id和按钮id删除一个按钮
```
 panelManager.removeButton(面板id, 按钮id);
```
getButton：通过面板id和按钮id获取一个按钮
```
panelManager.getButton(面板id, 按钮id);
```