summernote富⽂本编辑器的基本使⽤基础API
初始化 summernote
$('#summernote').summernote();
初始化并配置summernote
⾼度和焦点设置
如果对summernote设置了focus项，在编辑器初始化之后会⾃动获取焦点。
$('#summernote').summernote({
height: 300,                // set editor height
minHeight:null,            // set minimum heightof editor
maxHeight:null,            // set maximum heightof editor
focus: true                  // set focus to editable areaafter initializing summernote
});
对⾼度进⾏设置后，如果内容超过编辑器⾼度会出现滚动条。否则，编辑器⾼度会随内容⾼度变化⽽变化。
编辑器的销毁（destroy）
销毁summernote
$('#summernote').summernote('destroy');
获取&设置HTML内容（get&set）
获取编辑器内的HTML内容
var markupStr = $('#summernote').summernote('code');
如果初始化了多个编辑器，可以通过jquery的eq⽅法获取某个编辑器的HTML内容。eg，获取第⼆个编辑器的。var markupStr = $('.summernote').eq(1).summernote('code');
给指定的编辑器设置HTML内容
var markupStr = 'hello world';
$('#summernote').summernote('code', markupStr);
国际化⽀持
语⾔
引⼊需要⽀持的语⾔库。eg. summernote-ko-KR.js
<linkhref="netdna.bootstrapcdn/bootstrap/3.3.5/css/bootstrap.css"rel="stylesheet"> <scriptsrc="cdnjs.cloudflare/ajax/libs/jquery/2.1.4/jquery.js"></script>
<scriptsrc="netdna.bootstrapcdn/bootstrap/3.3.5/js/bootstrap.js"></script>
<link href="summernote.css"rel="stylesheet">
<script src="summernote.min.js"></script>
<!-- include summernote-ko-KR -->
<scriptsrc="lang/summernote-ko-KR.js"></script>
通过本地配置运⾏引⼊的脚本
$(document).ready(function() {优秀的富文本编辑器
$('#summernote').summernote({
lang: 'ko-KR' // default: 'en-US'
});
});
初始化配置
通过配置option和组件来⾃定义编辑器
⾃定义⼯具栏，弹出框
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']]
]
});
你也可以使⽤插件中已经预先定义好的⼯具栏。
你可以使⽤popover.air项来⾃定义极简模式的弹出框⽽不是⼯具栏。
$('#summernote').summernote({
popover: {
air: [
['color', ['color']],
['font', ['bold', 'underline', 'clear']]
]
}
});
同样也可以配置其他弹出框的按钮。
⾃定义placeholder
$('#summernote').summernote({
placeholder: ''
});
⾃定义字体
$('#summernote').summernote({
fontNames: ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New']
});
summernote在把配置项中的字体添加到字体下拉框之前会先进⾏字体检测，因此当我们使⽤⽹络字体时会遇到问题。可以在fontNamesIgnoreCheck配置项中定义⽹络字体的列表来使编辑器忽略对⽹络字体的检测。
Dialogs
对话框不⽌可以放置在编辑器内，也可以被置于body中。
$('#summernote').summernote({
dialogsInBody: true
});
Dialogs默认是没有淡⼊淡出效果的，可以使⽤dialogsFade配置
$('#summernote').summernote({
dialogsFade: true  // Add fade effect on dialogs
});
禁⽌拖放
可以使⽤disableDragAndDrop禁⽌拖放
$('#summernote').summernote({
disableDragAndDrop: true
});
禁⽌使⽤快捷键
$('#summernote').summernote({
shortcuts: false
});
基础API（editor模块）
使⽤summernote初始化编辑器
$('#summernote').summernote();
然后可以使⽤summernote调⽤编辑器提供的API。下⾯是⼀个插⼊⽂本的⽰例代码。
$('#summernote').summernote('editor.insertText', 'hello world'));
它调⽤了editor模块的‘insertText’函数，第⼀个参数是代表模块及其⽅法的字符串，其余的是需要传⼊⽅法的参数。第⼀个参数没有模块名的情况下，会默认为editor。
$('#summernote').summernote('insertText', 'hello world');
editor模块中⽀持以下⽅法
createRange
为⽤户当前选中的内容创建⼀个范围对象。
var range = $('#summernote').summernote('createRange');
saveRange, restoreRange
保存当前⽤户选中的内容
$('#summernote').summernote('saveRange');
重新保存选中的区域
$('#summernote').summernote('saveRange');
// move cursor and select 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');
}
reset（重置）
清除内容和存储记录
$('#summernote').summernote('reset');
disable, enable
disable使编辑器处于不可⽤状态。
$('#summernote').summernote('disable');
调⽤enable可以使编辑器从不可以转换到可⽤状态。
$('#summernote').summernote('enable');

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。