初始化选项

通过初始化各种选项和模块进行自定义。

自定义工具栏、弹出窗口

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

这是一个仅包含字体样式的工具栏。

您可以组合预装的按钮来创建工具栏。

  • 插入
    • picture: 打开图片对话框
    • link: 打开链接对话框
    • video: 打开视频对话框
    • table: 插入表格
    • hr: 插入水平线
  • 字体样式
    • fontname: 设置字体族
    • fontsize: 设置字体大小
    • fontsizeunit: 设置字体大小单位
    • color: 设置前景色和背景色
    • forecolor: 设置前景色
    • backcolor: 设置背景色
    • bold: 切换字体粗细
    • italic: 切换斜体
    • underline: 切换下划线
    • strikethrough: 切换删除线
    • superscript: 切换上标
    • subscript: 切换下标
    • clear: 清除字体样式
  • 段落样式
    • style: 格式化选定块
    • ol: 切换有序列表
    • ul: 切换无序列表
    • paragraph: 段落对齐下拉菜单
    • height: 设置行高
  • 其他
    • 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选项禁用 Grammarly 浏览器插件（目前正在研究其他 Grammar 插件的禁用选项）。

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

引用断开级别

您可以使用blockquoteBreakingLevel选项禁用 Grammarly 浏览器插件（目前正在研究其他 Grammar 插件的禁用选项）。

每个可配置的断开级别意味着：

  • 0 - 不断开，新段落保留在引用内。
  • 1 - 断开祖先列表中的第一个引用。
  • 2 - 断开所有引用，因此新段落不被引用。（默认）
$('#summernote').summernote({
  blockquoteBreakingLevel: 2
});

自定义样式

您可以使用styleTags选项禁用 Grammarly 浏览器插件（目前正在研究其他 Grammar 插件的禁用选项）。

$('#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选项禁用 Grammarly 浏览器插件（目前正在研究其他 Grammar 插件的禁用选项）。

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

Summernote 在将字体添加到下拉列表之前会测试字体。在使用网络字体时这是一个问题。选择检查网络字体可用性的合适时间并不容易。您可以使用fontNamesIgnoreCheck.

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

Summernote 会自动用fontNames选项中提供的可用字体填充字体下拉列表。这包括当前 dom 元素上设置的字体集。如果您只想在下拉列表中显示特定的字体列表，您可以将addDefaultFonts选项设置为false，同时使用fontNames选项。以下设置示例将仅在下拉列表中添加 Arial 和 Arial Black 字体。

$('#summernote').summernote({
  fontNames: ['Arial', 'Arial Black'],
  addDefaultFonts: false
});

自定义字体大小单位

您可以使用fontSizeUnits选项禁用 Grammarly 浏览器插件（目前正在研究其他 Grammar 插件的禁用选项）。

$('#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选项禁用 Grammarly 浏览器插件（目前正在研究其他 Grammar 插件的禁用选项）。

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

Summernote 还可以设置为从 dom 元素上的placeholder属性继承占位符。

<div class="summernote" placeholder="first placeholder"></div>
<div class="summernote" placeholder="second placeholder"></div>

然后在初始化时将inheritPlaceholder选项设置为true。

$('.summernote').summernote({
  inheritPlaceholder: true
});

对话框

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

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

默认情况下，对话框会显示和隐藏而没有任何淡入淡出效果。但是您可以通过dialogsFade.

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

打开它。

您可以使用disableDragAndDrop选项禁用 Grammarly 浏览器插件（目前正在研究其他 Grammar 插件的禁用选项）。

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

Disable shortcuts

您可以使用shortcuts选项禁用 Grammarly 浏览器插件（目前正在研究其他 Grammar 插件的禁用选项）。

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

Disable TAB

您可以使用tabDisable选项禁用 TAB/Shift+Tab 交互。

$('#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。summernote方法使用编辑器 API。这是一个插入“hello world”文本的示例代码。

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

它调用编辑器模块的 insertText 方法，参数为“hello world”。第一个参数是字符串类型，表示模块及其方法。其余的是方法的参数。

如果您不调用 API 并指定模块名，editor.methodName将被调用。

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

名为editor的模块支持编辑器基本行为的多种方法

codeview

您可以通过 API 切换可编辑/可编码视图。

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

createRange

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

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

disable, enable

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

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

如果您想再次启用编辑器，请使用enable.

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

Disable Spellchecking

您可以使用spellCheck选项禁用 Grammarly 浏览器插件（目前正在研究其他 Grammar 插件的禁用选项）。

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

Disable Grammarly Browser Addon

您可以使用disableGrammar选项禁用 Grammarly 浏览器插件（目前正在研究其他 Grammar 插件的禁用选项）。

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

focus

在当前 summernote 中设置焦点

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

fullscreen

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

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

isFullscreen

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

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

接口

您可以编程查找您正在使用的 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 and outdent

在当前段落上进行缩进或取消缩进。

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

insertOrderedList

切换有序列表或无序列表

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

insertParagraph

插入段落

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

justify left, right and more

设置段落的对齐方式。

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

创建链接和取消链接。

// @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

插入元素或文本节点。

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-> 内容的最后一个节点
  • editor.insertHorizontalRule-> hr 节点的下一个兄弟节点
  • editor.createLink-> 链接节点

setLastRange

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

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

rangeutility

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

create WrappedRange Object

范围实用程序创建 WrappedRange 类的实例

create

从参数或浏览器选择创建 WrappedRange Object

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 Object

select()

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()

返回范围是否被折叠或未折叠

const isCollapsed = rng.isCollapsed()
wrapBodyInlineWithPara()

用段落包装 body 的子级内联节点

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)

返回光标之前（或之后）单词的范围

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

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

WIP: 需要解释

onDialogShown

WIP: 需要解释

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 数据 URL）。更多…

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

WIP: 需要解释

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

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

WIP: 需要解释

自定义按钮

Summernote 还支持自定义按钮。如果您想创建自己的按钮，可以简单地定义并使用选项。

定义按钮

您可以使用 $.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 支持使用您自己的自定义图标。例如，您可以使用基于 SVG 的图标而不是默认图标。

定义您自己的图标

如果您想覆盖默认图标，请像这样配置 summernote：

$('.summernote').summernote({
  icons: {
  align: '<svg [...]>[...]</svg>',
  // [...]
  }
});

模块系统

为了支持可扩展功能，summernote 是由模块系统组装的。这个模块系统受到了 spring 框架的启发。

关键术语

  • 模块：模块是一个组件。
  • 上下文：上下文是一种容器。它包含模块和编辑器的状态。
  • 渲染器：渲染器是创建元素的函数。
  • UI：UI 是一组用于构建 UI 元素的渲染器。

模块

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

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

应该初始化

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

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

更多模块示例：modules

带选项的模块

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

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

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

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

插件

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

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

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

插件在v0.7.0

之后进行了重新设计，采用了新的模块系统。v0.7.0 之前的插件很难控制编辑器状态（例如，范围、布局等）。v0.7.0 之后，插件通过新的模块系统重新设计。它与模块完全相同，除了外围模块模式。

模块

通知/信息区域

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

当在 Normal 模式中使用 Summernote 时，该区域会出现在 Summernote 的底部，而当 Summernote 在 Air 模式中使用时，会出现在编辑区域顶部。

使用通知区域很简单，您可以通过它的类名来定位该区域.note-status-output.

通知元素可以使用任何标记，但我们添加了一些类似于 Bootstrap 的警报的样式。例如，要生成错误或危险警报，您可以使用<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'
);

您也可以通过将文本放置在元素（例如div, span或small）中并将其包含在类.pull-right.

中，将文本放置到右侧。text-muted, text-primary，‘text-success’，text-info, text-warning和text-danger.