模块系统

为了支持可扩展功能，summernote 采用了模块系统。该模块系统的构建灵感来自 Spring 框架。

### 关键术语
- Module: 模块是一个组件。
- Context: Context 是一种容器。它包含模块和编辑器状态。
- Renderer: 渲染器是一种创建元素的功能。
- UI: UI 是一组用于创建 UI 元素的渲染器。

### 模块
模块是实现功能的组件，具有生命周期。模块也有与生命周期相关的辅助方法或方法。

#### 初始化
当编辑器被 `$('..').summernote();` 初始化时，该方法将被调用。您可以在编辑器元素（例如，editable......）上附加事件和创建的元素。

```javascript
this.initialize = function () {
  // create button
  var button = ui.button({
    className: 'note-btn-bold',
    contents: '<i class="fa fa-bold">',
    click: function (e) {
      context.invoke('editor.bold'); // invoke bold method of a module named editor
    }
  });

// generate jQuery element from button instance.
  this.$button = button.render();
  $toolbar.append(this.$button);
}
```
#### 销毁
当编辑器被 `$('..').summernote('destroy')` 销毁时，该方法将被调用；您应在初始化时分离事件并移除元素。

```javascript
this.destroy = function () {
  this.$button.remove();
  this.$button = null;
}
```
#### 应初始化
该方法用于决定是否初始化模块。

```javascript
// AirPopover's shouldInitialize
this.shouldInitialize = function () {
  return options.airMode && !list.isEmpty(options.popover.air);
};
```

以下是自动链接模块的完整代码。

```javascript
// Module Name is AutoLink
// @param {Object} context - states of editor
var AutoLink = function (context) {

// you can get current editor's elements from layoutInfo
  var layoutInfo = context.layoutInfo;
  var $editor = layoutInfo.editor;
  var $editable = layoutInfo.editable;
  var $toolbar = layoutInfo.toolbar;

// ui is a set of renderers to build ui elements.
  var ui = $.summernote.ui;

// this method will be called when editor is initialized by $('..').summernote();
  // You can attach events and created elements on editor elements(eg, editable, ...).
  this.initialize = function () {
    // create button
    var button = ui.button({
      className: 'note-btn-bold',
      contents: '<i class="fa fa-bold">',
      click: function (e) {
        // invoke bold method of a module named editor
        context.invoke('editor.bold');
      }
    });

// generate jQuery element from button instance.
    this.$button = button.render();
    $toolbar.append(this.$button);
  }

// this method will be called when editor is destroyed by $('..').summernote('destroy');
  // You should detach events and remove elements on `initialize`.
  this.destroy = function () {
    this.$button.remove();
    this.$button = null;
  }
};
```
更多模块示例：[modules](https://github.com/summernote/summernote/tree/develop/src/js/base/module "modules")

### 模块的选项
您可以使用选项定义自定义模块。

```javascript
$(".summernote").summernote({
  modules: {
    myModule: MyModule
  }
});
```
您可以使用外部 API 调用模块方法。

```javascript
$(".summernote").summernote("myModule.method", 'hello');
```
### 插件
插件是一种外部模块。您也可以使用插件定义自己的模块。

```javascript
// src/mymodule.js
$.extend($.summernote.plugins, {
  myModule: function (context) {
    // define module
    ...
  }
});
```

以下链接是外部模块的示例。

- [plugin-hello](https://github.com/summernote/summernote/blob/v0.7.0/examples/plugin-hello.html "plugin-hello")

> **插件在 0.7.0 版之后由新模块系统重新设计**
旧插件难以控制编辑器状态（如范围、布局等）。v0.7.0 版之后，插件由新模块系统重新设计。除周边模块模式外，插件与模块完全相同。