summernote 探索(官方文档)

墨蓝 2021-07-04 16:37 2344阅读 1赞

## 初始化选项 ##

自定义初始化各种选项和模块。

### 自定义`toolbar, popover` ###

Summernote允许您自定义的工具栏。

![在这里插入图片描述][20201001010049623.png_pic_center]

$('#summernote').summernote({ 
      toolbar: [
        // [groupName, [list of button]]
        ['style', ['bold', 'italic', 'underline', 'clear']],
        ['font', ['strikethrough', 'superscript', 'subscript']],
        ['fontsize', ['fontsize']],
        ['color', ['color']],
        ['para', ['ul', 'ol', 'paragraph']],
        ['height', ['height']]
      ]
    });

这是一个工具栏,字体样式。

<div class="custom-toolbar"></div>
    <script> $(function() { $('.custom-toolbar').summernote({ toolbar: [ ['style', ['bold', 'italic', 'underline', 'clear']], ['font', ['strikethrough', 'superscript', 'subscript']], ['fontsize', ['fontsize']], ['color', ['color']], ['para', ['ul', 'ol', 'paragraph']], ['height', ['height']] ], placeholder: 'Toolbar for font style...' }); }); </script>

你可以用`pre-shipped`组成一个工具栏按钮。

*  插入
    
     *  `picture`: 打开图片对话框
     *  `link`: 打开链接对话框
     *  `video`: 打开视频对话框
     *  `table`: 插入一个表
     *  `hr`: 插入水平线
 *  字体样式
    
     *  `fontname`: 设置字体
     *  `fontsize`: 设置字体大小
     *  `fontsizeunit`: 设置字体大小单位
     *  `color`: 设置前景色和背景色
     *  `forecolor`: 设置前景色
     *  `backcolor`: 设置背景色
     *  `bold`: 切换字体粗细
     *  `italic`: 切换斜体
     *  `underline`:切换下划线
     *  `strikethrough`: 切换删除线
     *  `superscript`: 切换上标
     *  `subscript`: 切换下标
     *  `clear`: 清晰的字体样式
 *  段落样式
    
     *  `style`: 格式选择的块
     *  `ol`: 切换有序列表
     *  `ul`: 切换无序列表
     *  `paragraph`: 段落对齐下拉
     *  `height`: 设置行高
 *  Misc
    
     *  `fullscreen`: 切换全屏编辑模式
     *  `codeview`: 所见即所得和html编辑模式切换
     *  `undo`: 撤销
     *  `redo`: 重做
     *  `help`: 打开帮助对话框

以下设置是工具栏按钮的默认选项。

toolbar: [
      ['style', ['style']],
      ['font', ['bold', 'underline', 'clear']],
      ['fontname', ['fontname']],
      ['color', ['color']],
      ['para', ['ul', 'ol', 'paragraph']],
      ['table', ['table']],
      ['insert', ['link', 'picture', 'video']],
      ['view', ['fullscreen', 'codeview', 'help']],
    ],

`Air-mode`有自己的弹窗,没有工具栏。你可以定制它 `popover.air`选择。

$('#summernote').summernote({ 
      popover: { 
        air: [
          ['color', ['color']],
          ['font', ['bold', 'underline', 'clear']]
        ]
      }
    });

你也可以设置按钮弹窗以同样的方式。下面设置默认选项弹窗。

popover: { 
      image: [
        ['image', ['resizeFull', 'resizeHalf', 'resizeQuarter', 'resizeNone']],
        ['float', ['floatLeft', 'floatRight', 'floatNone']],
        ['remove', ['removeMedia']]
      ],
      link: [
        ['link', ['linkDialogShow', 'unlink']]
      ],
      table: [
        ['add', ['addRowDown', 'addRowUp', 'addColLeft', 'addColRight']],
        ['delete', ['deleteRow', 'deleteCol', 'deleteTable']],
      ],
      air: [
        ['color', ['color']],
        ['font', ['bold', 'underline', 'clear']],
        ['para', ['ul', 'paragraph']],
        ['table', ['table']],
        ['insert', ['link', 'picture']]
      ]
    }

### Blockquote breaking level 大段引用间断级别 ###

您可以使用`blockquoteBreakingLevel` 选项设置大段引用间断级别 .

每个可配置的间断级别表示：

*  0 - 不间断，新段落保留在引用内。
 *  1 - 间断祖先列表中的第一个blockquote.
 *  2 - 间断所有引用，以便不引用新段落。(default)

**级别0**  
![在这里插入图片描述][20201127101536851.png]  
**级别1**  
![在这里插入图片描述][20201127101754125.png]

$('#summernote').summernote({ 
      blockquoteBreakingLevel: 2
    });

### 自定义样式 ###

您可以使用`styleTags`选项设置自己的样式选择。

$('#summernote').summernote({ 
      styleTags: [
        'p',
            {  title: 'Blockquote', tag: 'blockquote', className: 'blockquote', value: 'blockquote' },
            'pre', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'
    	],
      });

可以仅通过标签名称来指定标签（与上面的`p`或`pre`或`h1`\-`h6`一样）。 也可以通过提供如下所示的对象，可以更详细地自定义样式：

{ 
         tag : 'tag name ',
         title : 'dropdown item title',
         style : 'dropdown item style',
         className : 'applyed element class name and dropdown item className',
         value : 'Value to apply when clicked'
    }

### 自定义`fontNames` ###

您可以使用`fontNames`选项定义字体

$('#summernote').summernote({ 
      fontNames: ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New']
    });

Summernote在将`fontNames`中的字体添加到下拉列表之前对其进行测试。 使用网络字体时，这是一个问题。 选择一个好的时间来检查网络字体的可用性并非易事。 您可以使用`fontNamesIgnoreCheck`定义要忽略的网络字体列表。

$('#summernote').summernote({ 
      fontNames: ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Merriweather'],
      fontNamesIgnoreCheck: ['Merriweather']
    });

### 自定义字体大小单位 ###

您可以使用`fontSizeUnits`选项设置可用的字体大小单位。

$('#summernote').summernote({ 
      fontSizeUnits: ['px', 'pt']
    });

### 自定义行高 ###

您可以覆盖默认列表并指定一个自定义列表。

$('#summernote').summernote({ 
      lineHeights: ['0.2', '0.3', '0.4', '0.5', '0.6', '0.8', '1.0', '1.2', '1.4', '1.5', '2.0', '3.0']
    });

### 自定义占位符 ###

您可以定义占位符 `placeholder`选择。

$('#summernote').summernote({ 
      placeholder: 'write here...'
    });

### 对话框 ###

对话框可以放置在 `body`中，而不是在`Summernote`中。 如果您在模态对话框中使用`Summernote`，请将此选项设置为 `true`。

$('#summernote').summernote({ 
      dialogsInBody: true
    });

默认情况下，显示和隐藏对话框时不会产生退出效果。 但是您可以通过`dialogsFade`将其打开。

$('#summernote').summernote({ 
      dialogsFade: true  // Add fade effect on dialogs
    });

### 禁用拖拽 ###

你可以禁用拖拽 `disableDragAndDrop`选择。

$('#summernote').summernote({ 
      disableDragAndDrop: true
    });

### 禁用快捷键 ###

你可以禁用自定义快捷键`shortcuts`选择

$('#summernote').summernote({ 
      shortcuts: false
    });

### 禁用TAB ###

您可以使用 `tabDisable` 选项禁用`TAB/Shift+Tab`交互。  
这将允许在表单中的字段之间进行`tabbing`。

$('#summernote').summernote({ 
      tabDisable: false
    });

### 对`CodeView`的XSS保护 ###

Summernote为`CodeView`提供了XSS保护。 它由`iframe`的过滤标签和白名单组成。

白名单过滤器默认情况下处于启用状态，但过滤标签未启用。 您可以通过以下选项打开和关闭它们。

$('#summernote').summernote({ 
      codeviewFilter: false,
      codeviewIframeFilter: true
    });

并且，您还可以添加自己的白名单域并使用自定义标签过滤器。 在进行自定义之前，请检查[默认过滤器][Link 1]。

$('#summernote').summernote({ 
      codeviewFilterRegex: 'custom-regex',
      codeviewIframeWhitelistSrc: ['my-own-domainname']
    });

但是您必须记住，此保护仅在前端侧起作用–为了彻底防止攻击，您必须在后端侧再次进行检查。

## 基本API ##

你可以初始化summernote `summernote`.

$('#summernote').summernote();

然后您可以使用编辑器API通过 `summernote`方法。这是一个示例代码插入文本“`hello world`”。

$('#summernote').summernote('editor.insertText', 'hello world'));

它调用编辑模块的`insertText`方法与“`hello world`”。第一个参数是一个字符串类型代表模块及其方法。其余的都是方法的参数。

如果您调用API没有模块名称, `editor.methodName`将被调用。

$('#summernote').summernote('insertText', 'hello world');

一个模块命名 `editor`支持编辑器的几种方法的基本行为

### `codeview` ###

您可以通过API切换`editable/codable`视图。

$('#summernote').summernote('codeview.toggle');

### `createRange` ###

为当前用户创建一个范围对象的选择。

var range = $('#summernote').summernote('createRange');

### `disable, enable` ###

您可以通过API禁用编辑器。

$('#summernote').summernote('disable');

如果要再次启用编辑器，请使用“ `enable`”调用API。

$('#summernote').summernote('enable');

### 禁用拼写检查 ###

您可以使用`spellCheck`选项在`Editing`区域中禁用拼写检查。

$('#summernote').summernote({ 
      spellCheck: true
    });

### 禁用语法浏览器插件 ###

您可以使用`disableGrammar`选项来禁用语法浏览器插件（当前正在研究其他语法插件的禁用选项）。

$('#summernote').summernote({ 
      disableGrammar: false
    });

### `focus` ###

在当前`summernote`设定一个焦点

$('#summernote').summernote('focus');

### `fullscreen` ###

您可以通过API切换全屏视图。

$('#summernote').summernote('fullscreen.toggle');

### `isFullscreen` ###

您可以使用`isFullscreen`来以编程方式确定Summernote是否处于全屏模式，这将返回`true`或`false`。

$('#summernote').summernote('fullscreen.isFullscreen');

### `interface` ###

您可以通过编程找到正在使用的`Summernote`。  
这将返回三个值之一：`bs3`，`bs4`或`lite`。

$.summernote.interface;

### `isEmpty` ###

返回是否内容是空的。

编辑区域的需求 `<p><br></p>`焦点,即使内容是空的。所以`summernote`支持这个方法帮助检查内容是空的。

if ($('#summernote').summernote('isEmpty')) { 
      alert('editor content is empty');
    }

### `reset` ###

清除编辑器内容并删除所有存储的历史记录。

$('#summernote').summernote('reset');

### `saveRange, restoreRange` ###

`saveRange`在内部保存当前用户选择。

$('#summernote').summernote('saveRange');

`restoreRange`恢复当前保存的范围

$('#summernote').summernote('saveRange');
    // move cursor and select another
    $('#summernote').summernote('restoreRange');

### `undo, redo` ###

撤销和重做最后一个命令

$('#summernote').summernote('undo');
    $('#summernote').summernote('redo');

## 字体风格的API ##

### `backColor, foreColor` ###

背景和前景颜色设置

// @param {String} color
    $('#summernote').summernote('backColor', 'red');
    
    // @param {String} color
    $('#summernote').summernote('foreColor', 'blue');

### bold, italic, underline, strikethrough 粗体、斜体、下划线、删除线 ###

设置字体样式。

$('#summernote').summernote('bold');
    $('#summernote').summernote('italic');
    $('#summernote').summernote('underline');
    $('#summernote').summernote('strikethrough');

### `fontName` ###

设置字体

// @param {String} fontName
    $('#summernote').summernote('fontName', 'Arial');

### `fontSize` ###

设置字体大小

// @param {Number} font size - unit is determined by selected font size unit.
    $('#summernote').summernote('fontSize', 20);

### `fontSizeUnit` ###

设置字体大小单位。

// @param {String} font size unit - defaults to px.
    $('#summernote').summernote('fontSizeUnit', 'pt');

### `removeFormat` ###

清除一个样式

$('#summernote').summernote('removeFormat');

### `superscript, subscript` ###

设置上标或下标

$('#summernote').summernote('superscript');
    $('#summernote').summernote('subscript');

## 段落 API ##

### `formatH1-H6` ###

将当前段落更改为`<h1>〜<h6>`。

$('#summernote').summernote('formatH2');
    $('#summernote').summernote('formatH6');

### `formatPara` ###

改变当前段落作为`<p>`。

$('#summernote').summernote('formatPara');

### `indent` 和`outdent` ###

在当前段落上缩进或减少缩进。

$('#summernote').summernote('indent');
    $('#summernote').summernote('outdent');

### `insertOrderedList` ###

切换有序列表和无序列表

$('#summernote').summernote('insertOrderedList');

$('#summernote').summernote('insertUnorderedList');

### `insertParagraph` ###

插入一段

$('#summernote').summernote('insertParagraph');

### 左右对齐等 ###

设置段落的对齐方式。

$('#summernote').summernote('justifyLeft');
    $('#summernote').summernote('justifyRight');
    $('#summernote').summernote('justifyCenter');
    $('#summernote').summernote('justifyFull');

### `lineHeight` ###

设置行高。

// @param {Number} line height - unit is px
    $('#summernote').summernote('lineHeight', 20);

## 插入API ##

### `createLink, unlink` ###

创建链接并取消链接

// @param {String} text - link text
    // @param {String} url - link url
    // @param {Boolean} isNewWindow - whether link's target is new window or not
    $('#summernote').summernote('createLink', { 
      text: "This is the Summernote's Official Site",
      url: 'http://summernote.org',
      isNewWindow: true
    });
    
    $('#summernote').summernote('unlink');

### `insertImage` ###

插入图像。

// @param {String} url
    // @param {String|Function} filename - optional
    $('#summernote').summernote('insertImage', url, filename);

您可以通过传递回调作为第二个参数来修改图像。

$('#summernote').summernote('insertImage', url, function ($image) { 
      $image.css('width', $image.width() / 3);
      $image.attr('data-filename', 'retriever');
    });

### `insertNode` ###

插入一个元素或`textnode`。

var node = document.createElement('div');
    // @param {Node} node
    $('#summernote').summernote('insertNode', node);

### `insertText` ###

插入文字。

// @param {String} text
    $('#summernote').summernote('insertText', 'Hello, world');

### `pasteHTML` ###

粘贴HTML字符串。

// @param {String} HTML string
    var HTMLstring = '<div><p>Hello, world</p><p>Summernote can insert HTML string</p></div>';
    $('#summernote').summernote('pasteHTML', HTMLstring);

## 范围和选择API ##

### `saveRange` ###

参考上面 saveRange

### `restoreRange` ###

参考上面 restorerange

### `getLastRange` ###

summernote正在将范围对象（`WrappedRange`）保存在当前光标处。

const rng = $('#summernote').summernote('editor.getLastRange');

> #### 当summernote使用dom事件保存范围时 ####
> 
>  *  keydown
>  *  keyup
>  *  focus
>  *  mouseup
>  *  paste

> #### 当summernote使用api保存范围时 ####
> 
>  *  `editor.insertImage` \-> Image
>  *  `editor.insertNode` \-> Node
>  *  `editor.insertText` \-> TextNode
>  *  `editor.pasteHTML` \-> last Node of contents
>  *  `editor.insertHorizontalRule` \-> next sibling node of hr node
>  *  `editor.createLink` \-> link node

### `setLastRange` ###

您可以在summernote可编辑元素的节点中定义自定义范围。

const range = $.summernote.range;  // range utility
    // set my custom range
    $('#summernote').summernote('editor.setLastRange', range.createFromNodeAfter(node).select());

### `range` 工具 ###

const range = $.summernote.range;  // range utility

#### 创建`WrappedRange` 对象 ####

`range`工具创建`WrappedRange`类的实例

##### `create` #####

从参数或浏览器选择创建`WrappedRange`对象

const rng = range.create(startContainer, startOffset, endContainer, endOffset)
    
    // or
    
    const rng = range.create() // is equals range.createFromSelection()

##### `createFromNode` #####

从节点创建`WrappedRange`对象

const rng = range.createFromNode(node)

##### `createFromNodeBefore` #####

在位置之前从节点创建`WrappedRange`

const rng = range.createFromNodeBefore(node)

##### `createFromNodeAfter` #####

在位置之后从节点创建`WrappedRange`

const rng = range.createFromNodeAfter(node)

##### `createFromSelection` #####

从选择位置创建`WrappedRange`对象

const rng = range.createFromSelection(node)

#### `WrappedRange` 对象 ####

##### `select()` #####

选择更新可见范围

rng.select()

##### `collapse(isCollapseToStart)` #####

const newRng = rng.collapse(true);   // to start rng 
    
    or
    
    const newRng = rng.collapse();  // to end rng

##### `splitText()` #####

在范围上`splitText`

const textRng = rng.splitText()

##### `deleteContents()` #####

在范围上删除内容

const newRng = rng.deleteContents()

##### `isCollapsed()` #####

返回`range`是否折叠

const isCollapsed = rng.isCollapsed()

##### `wrapBodyInlineWithPara()` #####

用段落包装内联节点

const newRng = rng.wrapBodyInlineWithPara()

##### `insertNode(node)` #####

在当前光标处插入节点

const node = rng.insertNode(document.createElement('div'))

##### `pasteHTML(markup)` #####

在当前光标处插入html

const nodes = rng.pasteHTML(`<div>summernote</div>`)

##### `toString()` #####

返回范围内的文本

##### `getWordRange(findAfter)` #####

返回光标之前（或之后）的单词范围  
returns range for word before(or after) cursor

const newRng = rng.getWordRange();   // before cursor
    
    // or
    
    const newRng = rng.getWordRange(true);   // after cursor

##### `getWordsMatchRange(regex)` #####

返回光标前与正则表达式匹配的单词的范围

// range : 'hi @Peter Pan'
    const rng = range.create() // or $('.summernote').summernote('getLastRange');
    
    const newRng = rng.getWordsMatchRange(/@[a-z ]+/i)
    
    console.log(newRng.toString())  // '@Peter Pan'

##### `getClientRects()` #####

返回`DOMRect`对象的列表，这些对象代表该范围所占据的屏幕区域。

> ###### `Range.getClientRects()` ######
> 
> https://developer.mozilla.org/en-US/docs/Web/API/Range/getClientRects

## 回调 ##

Summernote支持初始化回调函数和jquery的自定义事件回调风格。

> ##### v0.7.0之后，选项中的回调位置已更改 #####
> 
> 在v0.7.0之后，每个回调都应由`callbacks`对象包装。

> ##### v0.6.5之后，回调仅适用于驼峰式字符串 #####
> 
> 小写字符串已用于基本事件名称（例如： `oninit`, `onenter`, `onfocus`, `onblur`, `onkeyup`, `onkeydown`, `onpaste`）。 相反，高级功能的回调名称已与驼峰式大小写字符串一起使用。 这是不一致的，并且使用起来很混乱。 因此，我们将所有小写回调都重命名为驼峰式字符串。

#### `onBeforeCommand` ####

工作在进行中

### `onChange` ###

*  IE9-10: `DOMCharacterDataModified`, `DOMSubtreeModified`, `DOMNodeInserted`
 *  Chrome, FF: `input`

// onChange callback
    $('#summernote').summernote({ 
      callbacks: { 
        onChange: function(contents, $editable) { 
          console.log('onChange:', contents, $editable);
        }
      }
    });
    
    // summernote.change
    $('#summernote').on('summernote.change', function(we, contents, $editable) { 
      console.log('summernote\'s content is changed.');
    });

### `onChangeCodeview` ###

工作在进行中

### `onDialogShown` ###

工作在进行中

### `onEnter` ###

// onEnter callback
    $('#summernote').summernote({ 
      callbacks: { 
        onEnter: function() { 
          console.log('Enter/Return key pressed');
        }
      }
    });
    
    // summernote.enter
    $('#summernote').on('summernote.enter', function() { 
      console.log('Enter/Return key pressed');
    });

### `onFocus, onBlur, onBlurCodeview` ###

// onFocus callback
    $('#summernote').summernote({ 
      callbacks: { 
        onFocus: function() { 
          console.log('Editable area is focused');
        }
      }
    });
    
    // summernote.focus
    $('#summernote').on('summernote.focus', function() { 
      console.log('Editable area is focused');
    });

// onBlur callback
    $('#summernote').summernote({ 
      callbacks: { 
        onBlur: function() { 
          console.log('Editable area loses focus');
        }
      }
    });
    
    // summernote.blur
    $('#summernote').on('summernote.blur', function() { 
      console.log('Editable area loses focus');
    });

// onBlurCodeview callback
    $('#summernote').summernote({ 
      callbacks: { 
        onBlurCodeview: function() { 
          console.log('Codeview area loses focus');
        }
      }
    });
    
    // summernote.blur.codeview
    $('#summernote').on('summernote.blur.codeview', function() { 
      console.log('Codeview area loses focus');
    });

### `onImageLinkInsert` ###

通过`url`覆盖图片插入

// onImageLinkInsert callback
    $('#summernote').summernote({ 
      callbacks: { 
        onImageLinkInsert: function(url) { 
          // url is the image url from the dialog
          $img = $('<img>').attr({  src: url })
          $summernote.summernote('insertNode', $img[0]);
        }
      }
    });
    
    // summernote.image.link.insert
    $('#summernote').on('summernote.image.link.insert', function(we, url) { 
      // url is the image url from the dialog
      $img = $('<img>').attr({  src: url })
      $summernote.summernote('insertNode', $img[0]);
    });

### `onImageUpload` ###

覆盖图片上传处理程序（默认：`IMG`标签上的`base64 dataURL`）。  
您可以将图像上传到服务器或AWS S3。

// onImageUpload callback
    $('#summernote').summernote({ 
      callbacks: { 
        onImageUpload: function(files) { 
          // upload image to server and create imgNode...
          $summernote.summernote('insertNode', imgNode);
        }
      }
    });
    
    // summernote.image.upload
    $('#summernote').on('summernote.image.upload', function(we, files) { 
      // upload image to server and create imgNode...
      $summernote.summernote('insertNode', imgNode);
    });

### `onImageUploadError` ###

工作在进行中

### `onInit` ###

// onInit callback
    $('#summernote').summernote({ 
      callbacks: { 
        onInit: function() { 
          console.log('Summernote is launched');
        }
      }
    });
    
    // summernote.init
    $('#summernote').on('summernote.init', function() { 
      console.log('Summernote is launched');
    });

### `onKeyup, onKeydown` ###

// onKeydown callback
    $('#summernote').summernote({ 
      callbacks: { 
        onKeydown: function(e) { 
          console.log('Key is downed:', e.keyCode);
        }
      }
    });
    
    // summernote.keydown
    $('#summernote').on('summernote.keydown', function(we, e) { 
      console.log('Key is downed:', e.keyCode);
    });

### `onMouseDown,onMouseUp` ###

// onKeyup callback
    $('#summernote').summernote({ callbacks:{ onKeyup:function(e){ console.log('Key is released:',e.keyCode);}}});
    // summernote.keyup
    $('#summernote').on('summernote.keyup',function(we,e){ console.log('Key is released:',e.keyCode);});
    
    
    
    // onKeydown callback
    $('#summernote').summernote({ callbacks:{ onKeydown:function(e){ console.log('Key is downed:',e.keyCode);}}});
    // summernote.keydown
    $('#summernote').on('summernote.keydown',function(we,e){ console.log('Key is downed:',e.keyCode);});

### `onPaste` ###

// onPaste callback
    $('#summernote').summernote({ 
      callbacks: { 
        onPaste: function(e) { 
          console.log('Called event paste');
        }
      }
    });
    
    // summernote.paste
    $('#summernote').on('summernote.paste', function(e) { 
      console.log('Called event paste');
    });

### `onScroll` ###

工作在进行中

## 自定义按钮 ##

Summernote还支持自定义按钮。 如果要创建自己的按钮，则可以简单地定义`options`并与之配合使用。

### 定义按钮 ###

您可以使用`$.summernote.ui`创建一个按钮对象。 此按钮对象具有以下属性。

*  `contents`: 要在按钮上显示的内容
 *  `tooltip`: 鼠标悬停时的提示文本
 *  `click`: 单击鼠标时要调用的回调函数

下面的代码是有关用于插入文本`hello`的简单按钮的。

您可以看到`render()` ，它返回jquery对象作为按钮。

### 使用带有选项的按钮 ###

让我们学习如何使用工具栏上的按钮。

首先，您可以使用名为`buttons`的选项定义按钮，该选项是一组键值。 您可以在工具栏选项上定义自定义按钮。

$('.summernote').summernote({ 
      toolbar: [
        ['mybutton', ['hello']]
      ],
    
      buttons: { 
        hello: HelloButton
      }
    });

您也可以以同样的方式在`popover`上使用自定义按钮。

## 模块系统 ##

为了支持可扩展功能，summernote由模块系统组装而成。 该模块系统是受spring框架启发而构建的。

### 关键术语 ###

*  Module: 模块是一个组件。
 *  Context: 上下文是一种容器。 它具有模块和编辑器状态。
 *  Renderer: 渲染器是用于创建元素的函数。
 *  UI: `UI`是一组用于构建ui元素的渲染器。

### Module ###

模块是用于实现功能的组件，并且具有生命周期。 模块还具有辅助方法或与生命周期相关的方法。

#### `initialize` ####

这种方法将编辑器初始化时调用`$('..').summernote();`。你可以附加事件和创建元素编辑元素(如可编辑,…)。

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);
    }

#### `destroy` ####

当`$('..').summernote('destroy');`销毁编辑器时，将调用此方法。 你应该分离事件并删除`initialize`上的元素。

this.destroy = function () { 
      this.$button.remove();
      this.$button = null;
    }

#### `shouldInitialize` ####

此方法用于确定是否将初始化模块。

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

以下是`AutoLink`模块的完整代码。

// 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;
      }
    };

更多模块的例子:模块

### 带有`options`的模块 ###

您可以使用`options`定义自定义模块。

$(".summernote").summernote({ 
      modules: { 
        myModule: MyModule
      }
    });

您可以使用外部API调用模块的方法。

$(".summernote").summernote("myModule.method", 'hello');

### 插件 ###

插件是一种外部模块。 您也可以使用插件定义自己的模块。

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

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

*  [plugin-hello][]

> ##### v0.7.0之后，插件由新的模块系统重新设计。 #####
> 
> 旧插件很难控制编辑器状态（例如范围，布局等）。 v0.7.0之后，新模块系统将重新设计插件。与模块完全相同，除了周边的模块模式。

## 模块 ##

### 通知/信息区 ###

Summernote允许添加带有上下文着色的通知以指示通知的类型，或将该区域用于信息目的。

在正常模式下使用时，该区域显示在`Summernote`的底部，而在`Air Mode`下使用时，该区域显示在编辑区域的顶部。

使用`Notifcation`区域很简单，并且可以通过使用类名`.note-status-output`来定位该区域来使用。

通知元素可以使用任何标记，但是我们已经按照Bootstrap的`Alerts`添加了一些样式。 例如 要产生错误或危险警报，可以使用`<div class="alert alert-danger">This is an error</div>`。 您还可以使用`alert-info`, `alert-warning`, `alert-success`和 `alert-danger`。

您可以使用jQuery或其他Javascript方法通过将输出元素定位为目标来添加上述消息，例如（使用jQuery）：

$('.note-status-output').html(
      '<div class="alert alert-danger">' +
        'This is an error using a Bootstrap alert that has been restyled to fit here.' +
      '</div>'
    );

如果只想显示信息性文本，也可以根据需要添加不带警报的文本。

$('.note-status-output').html(
      'Text Information'
    );

您也可以通过将`Text`放置在诸如`div`, `span`或`small` 之类的元素中并包括类`.pull-right`来将文本放置在右侧。

您还可以使用 `text-muted`, `text-primary`,`text-success`, `text-info`, `text-warning` 和`text-danger`类为文本使用上下文颜色。

[20201001010049623.png_pic_center]: /images/20210704/8ab43b9d4007451290c4daf8cf3fdf9a.png
[20201127101536851.png]: /images/20210704/8d79c2d743ed4adeb317f833e32ede6c.png
[20201127101754125.png]: /images/20210704/0e89abb859884f2e9d8590fbd454399c.png
[Link 1]: https://github.com/summernote/summernote/blob/a9512de7f2e20db866ba02708fb7209147f5dedf/src/js/base/settings.js#L209
[plugin-hello]: https://github.com/summernote/summernote/blob/v0.7.0/examples/plugin-hello.html