jQuery富文本编辑器summernote

一款jQuery富文本编辑器summernote，summernote是一个简洁灵活的所见即所得的HTML在线编辑器，基于jQuery和Bootstrap构建，支持快捷键操作，提供大量可定制的选项，同时具有编辑功能和上传功能，整体的交互性相当的强，喜欢的童鞋请收下吧。

分类：表单代码 > 输入框难易：初级

查看演示下载资源下载积分： 30 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分，需要远程调用bootstrap.css和引入summernote.css，并设置好编辑器的基本样式，代码如下：

<link type="text/css" rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css">
<link type="text/css" rel="stylesheet" href="dist/summernote.css">
<style type="text/css">
.m{ width: 88%; margin-left: auto; margin-right: auto; }
</style>

接着引入jQuery库，远程调用bootstrap.min.js，并引入summernote.js及其语言插件summernote-zh-CN.js，代码如下：

<script src="dist/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="dist/summernote.js"></script>
<script type="text/javascript" src="dist/lang/summernote-zh-CN.js"></script>    <!-- 中文-->
<script type="text/javascript">
$(function(){
    $('.summernote').summernote({
        height: 200,
        tabsize: 2,
        lang: 'zh-CN'
    });
});
</script>

页面body部分，仅需设置好指定的div作为容器即可，同一页面支持多个编辑器，代码如下：

<div class="m">		
	<div class="summernote">秘密</div>
	<div class="summernote">吸引力法则</div>
</div>