[转]富文本编辑器summernote中文API文档

初始化选项

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

自定义工具栏

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

$('#summernote').summernote({toolbar:[// [groupName, 

]['style',['bold','italic','underline','clear']],['font',['strikethrough','superscript','subscript']],['fontsize',['fontsize']],['color',['color']],['para',['ul','ol','paragraph']],['height',['height']],]});

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

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

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

自定义弹出窗口

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

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

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

popover:{image:[['imagesize',['imageSize100','imageSize50','imageSize25']],['float',['floatLeft','floatRight','floatNone']],['remove',['removeMedia']]],link:[['link',['linkDialogShow','unlink']]],air:[['color',['color']],['font',['bold','underline','clear']],['para',['ul','paragraph']],['table',['table']],['insert',['link','picture']]]}

自定义占位符

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

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

禁用拖拽

你可以禁用拖拽 disableDragAndDrop选择。

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

禁用快捷键

你可以禁用和快捷键自定义快捷键

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

基本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支持编辑器的几种方法的基本行为

createRange

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

varrange=$('#summernote').summernote('createRange');

saveRange

保存当前用户选择内部。

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

restoreRange

目前恢复保存的范围

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

撤销、重做

撤销和重塑最后一个命令

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

焦点

在当前summernote设定一个焦点

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

isEmpty

返回是否内容是空的。

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

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

字体风格的API

粗体、斜体、下划线、删除线

设置字体样式

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

上标,下标

设置上标或下标

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

removeFormat

干净的风格

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

背景色、字体颜色

背景和前景颜色设置

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

字体名

设置字体

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

字形大小

设置字体大小

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

段API

证明左、右和更多

设置段落对齐

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

insertParagraph

插入段落

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

insertOrderedList

切换有序列表和无序列表

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

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

缩进和减少缩进

当前段落缩进和减少缩进

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

formatPara

改变当前段落 <p>.

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

formatH1-H6

改变当前段落 <h1> ~ <h6>.

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

lineHeight

设置行高

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

插入API

insertImage

插入一个图片

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

insertNode

插入一个元素或textnode

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

insertText

插入一个文本

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

创建,拆开

创建链接和分离

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

回调

Summernote支持回调函数进行初始化和jquery的定制事件回调风格。

回调的位置选择v0.7.0后改变

v0.7.0之后,每个回调函数应该被包装 callbacks对象。

回调仅适用于驼峰式大小写v0.6.5后字符串

小写的字符串已被用于基本事件名称(例: oninit, onenter, onfocus, onblur, onkeyup,onkeydown,onpaste)。相比之下,回调函数名高级功能已经使用驼峰式大小写字符串。这是不一致的和混淆使用。所以我们重命名所有小写调驼峰式大小写字符串。

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

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

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

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

onPaste

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

onImageUpload

覆盖图像上传处理程序(默认值:base64 dataURL IMG标签)。你可以上传图片到服务器或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);});

onChange

• IE9-10:DOMCharacterDataModified DOMSubtreeModified DOMNodeInserted
• Chrome,FF:输入

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

模块系统

支持可扩展的特性,summernote组装模块系统。这个模块系统建于灵感来自spring框架。

关键术语

• 模块:模块是一个组件。
• 背景:背景是一种容器。模块和编辑器的状态。
• 渲染器:渲染器是一个函数来创建元素。
• 界面:UI是一组渲染器来构建UI元素。

模块

模块是一个组件实现功能和生命周期。模块也有辅助方法或方法与生命周期。

初始化

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

this.initialize=function(){
// create button
varbutton=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(“毁灭”);你应该分离事件和删除元素 initialize.

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

shouldInitialize

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

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

下面是AutoLink模块的完整代码。

// Module Name is AutoLink// @param {Object} context - states of editor
varAutoLink=function(context){
// you can get current editor's elements from layoutInfo
varlayoutInfo=context.layoutInfo;var$editor=layoutInfo.editor;var$editable=layoutInfo.editable;var$toolbar=layoutInfo.toolbar;
// ui is a set of renderers to build ui elements.varui=$.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
varbutton=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;}};

更多模块的例子:模块

插件

插件是一种外部模块。您可以定义您自己的模块和插件。下面的链接是一个外部模块的例子。

• plugin-hello

插件后重新设计了新的模块系统 v0.7.0

旧的插件是很难控制编辑状态(如范围、布局等等)。v0.7.0插件后由新模块系统重新设计。正是与模块除了周边模块模式相同。

原文地址：http://summernote.org/deep-dive/

原博文地址：http://www.adki.me/summernote-chinese-api-documentation-i.html