【plugins】Summernote的引入、初始化、取值、赋值、方法详解

版权声明：本文为博主原创文章，可以转载，但请说明文章的原始出处： https://blog.csdn.net/liyunkun888/article/details/82782280

一、引入

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)