一、引入
Summernote是一个简单灵活的所见即所得的 HTML 在线编辑器,基于 jQuery 和 Bootstrap 构建,支持快捷键操作,提供大量可定制的选项。
<link href="https://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/summernote/0.8.10/summernote.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.js"></script>
<script src="https://cdn.bootcss.com/summernote/0.8.10/summernote.js"></script>
<script src="https://cdn.bootcss.com/summernote/0.8.10/lang/summernote-zh-CN.js"></script>
二、初始化
Summernote的初始化特别的简单,只需要在页面中创建一个空的div承载就OK了。
HTML
<div class="summernote"></div>
JS
$(".summernote").summernote({
height:500, //高度
minHeight:null, //最小高度
maxHeight:null, //最大高度
focus:false, //是否获取焦点
lang:'zh-CN' //中文
})
三、取值
1.原来的取值方式
var sHTML = $('.summernote').code();
//同一页面多个summernote时,取第二个的值
var sHTML = $('.summernote').eq(1).code();
2.现在的取值方式
var sHTML = $('.summernote').summernote('code');
四、赋值
1.原来的赋值方式
$('.summernote').code('要赋的值');
2.现在的赋值方式
$('.summernote').summernote('code','要赋的值');
五、方法
API地址: Summernote完整API地址
Summernote完整资源包下载:Summernote完整资源包下载(font、lang、plugin、css、js)