summernote是一款Jquery文本编辑器的插件,
转自:http://www.adki.me/summernote-chinese-api-documentation-i.html
初始化选项
自定义初始化各种选项和模块。
自定义工具栏
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;}};