summernote 探索(官方文档)

初始化选项

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

自定义toolbar, popover

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

$('#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

级别1

$('#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
});

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

$('#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

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

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的简单按钮的。

var HelloButton = function (context) {
  var ui = $.summernote.ui;

  // create button
  var button = ui.button({
    contents: '<i class="fa fa-child"/> Hello',
    tooltip: 'hello',
    click: function () {
      // invoke insertText method with 'hello' on editor module.
      context.invoke('editor.insertText', 'hello');
    }
  });

  return button.render();   // return button as jquery object
}

您可以看到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类为文本使用上下文颜色。