关于富⽂本编辑器summernote的基本使⽤（三）关于富⽂本编辑器summernote的基本使⽤（三）
基础API（editor模块）
使⽤summernote初始化编辑器
$('#summernote').summernote();
然后可以使⽤summernote调⽤编辑器提供的API。下⾯是⼀个插⼊⽂本的⽰例代码。
$('#summernote').summernote('editor.inrtText', 'hello world'));
它调⽤了editor模块的‘inrtText’函数，第⼀个参数是代表模块及其⽅法的字符串，其余的是需要传⼊⽅法的参数。
第⼀个参数没有模块名的情况下，会默认为editor。
$('#summernote').summernote('inrtText', 'hello world');
editor模块中⽀持以下⽅法
createRange
为⽤户当前选中的内容创建⼀个范围对象。
var range = $('#summernote').summernote('createRange');
saveRange, restoreRange
保存当前⽤户选中的内容
$('#summernote').summernote('saveRange');
重新保存选中的区域
$('#summernote').summernote('saveRange');
森林防火的画// move cursor and lect another
$('#summernote').summernote('restoreRange');
undo, redo
撤销和恢复最后⼀个命令
$('#summernote').summernote('undo');
$('#summernote').summernote('redo');
focus
为编辑器设置焦点
$('#summernote').summernote('focus');
isEmpty
返回编辑器中内容是否为空
编辑区域获取焦点时会⾃动⽣成
，即使并没有实际内容。所以summernote提供了这个⽅法来判断内容是否真的为空。
if ($('#summernote').summernote('isEmpty')) {
alert('contents is empty');
}
ret（重置）
清除内容和存储记录
$('#summernote').summernote('ret');
disable, enable
disable使编辑器处于不可⽤状态。
$('#summernote').summernote('disable');
调⽤enable可以使编辑器从不可以转换到可⽤状态。
$('#summernote').summernote('enable');
字体样式API
bold, italic, underline, strikethrough
设置编辑器所有内容的字体样式。
$('#summernote').summernote('bold');//加粗
$('#summernote').summernote('italic');//斜体
$('#summernote').summernote('underline');//下划线
$('#summernote').summernote('strikethrough');//删除线
superscript, subscript（上⾓标，下⾓标）
$('#summernote').summernote('superscript');
$('#summernote').summernote('subscript');
removeFormat（清除样式）
$('#summernote').summernote('removeFormat');
backColor, foreColor（背景⾊，前景⾊）
/
/ @param {String} color
$('#summernote').summernote('backColor', 'red');
// @param {String} color
$('#summernote').summernote('foreColor', 'blue');
fontName（字体）
含动物的词语// @param {String} fontName
$('#summernote').summernote('fontName', 'Arial');
传统村落保护fontSize（字体⼤⼩）
// @param {Number} font size - unit is px
$('#summernote').summernote('fontSize', 20);
Paragraph API
justify left, right and more
设置段落居中样式
$('#summernote').summernote('justifyLeft');
$('#summernote').summernote('justifyRight');
$('#summernote').summernote('justifyCenter');
$('#summernote').summernote('justifyFull'); inrtParagraph（插⼊段落）
$('#summernote').summernote('inrtParagraph'); inrtOrderedList（插⼊列表）
$('#summernote').summernote('inrtOrderedList');
$('#summernote').summernote('inrtUnorderedList'); indent and outdent（缩进和凸排）
$('#summernote').summernote('indent');
$('#summernote').summernote('outdent'); formatPara
将编辑器内容格式化为段落
$('#summernote').summernote('formatPara'); formatH1-H6
$('#summernote').summernote('formatH2');
$('#summernote').summernote('formatH6'); lineHeight（设置⾏⾼）
// @param {Number} line height - unit is px
$('#summernote').summernote('lineHeight', 20);
Inrtion API
inrtImage（插⼊图⽚）
鸣梁海战电影// @param {String} url
// @param {String|Function} filename - optional
$('#summernote').summernote('inrtImage', url, filename);
你也可以把第⼆个参数设置为回调函数来对上传的图⽚进⾏修改
$('#summernote').summernote('inrtImage', url, function ($image) {
$image.css('width', $image.width() / 3);
最尖的针打一成语$image.attr('data-filename', 'retriever');
});
inrtNode
插⼊元素和⽂本节点
var node = ateElement('div');
// @param {Node} node
$('#summernote').summernote('inrtNode', node);
inrtText（插⼊⽂本）
/
/ @param {String} text
$('#summernote').summernote('inrtText', 'Hello, world');
createLink, unlink（创建、取消链接）
// @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's Official Site',
赛马不相马url: 'summernote',
newWindow: true
});
$('#summernote').summernote('unlink');
Callbacks
summernote⽀持初始化回调函数和jquery⾃定义事件的回调函数 在V0.7.0之后的版本中callback选项配置的位置变化了。
在V0.7.0之后的版本中callback应该被callbacks对象包裹。
在V0.6.5之后的版本中事件的回调函数键值必须使⽤驼峰命名法。
在V0.6.5之前的版本中基本的事件命名（⽐如：oninit,onenter,onfocus,onblur,onkeyup,onkeydown,onpaste）都是使⽤⼩写字符串，但是在Callbacks中的对⾼级特性的事件回调函数命名使⽤驼峰命名法，这样就造成了命名不⼀致，更加混乱。所以我们把所有的⼩写的callback改成了驼峰命名法。
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 presd');
}
}
下一节
});
//
$('#summernote').on('', function() {
console.log('Enter/Return key presd');
});
onFocus, onBlur
// onFocus callback
$('#summernote').summernote({
callbacks: {
onFocus: function() {
console.log('Editable area is focud');
}
}
银汉迢迢暗渡});
// summernote.focus
$('#summernote').on('summernote.focus', function() {
console.log('Editable area is focud');
});
onKeyup, onKeydown
