初始化选项
自定义初始化各种选项和模块。
自定义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
-> Imageeditor.insertNode
-> Nodeeditor.insertText
-> TextNodeeditor.pasteHTML
-> last Node of contentseditor.insertHorizontalRule
-> next sibling node of hr nodeeditor.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
...
}
});
下面的链接是外部模块的示例。
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
类为文本使用上下文颜色。