1.首先需要从官网（https://summernote.org/）下载summernote的包（js和css两部分）然后新建一个页面，因为这个是建立在jquery和bootstarp两个基础上的，所以我们也需要引用他们，以下为我们引入的五个文件，代码如下：

<script src="../../js/jquery-3.1.1.min.js"></script><link href="../../css/bootstrap.css" rel="stylesheet" /><script src="../../js/bootstrap.min.js"></script><link href="dist/summernote.css" rel="stylesheet" /><script src="dist/summernote.js"></script>

2.创建一个summernote的容器。

<div id="summernote">Hello Summernote</div>

3.创建summernote，并且将上传的图片保存到本地，然后再返回到编辑器中，如果直接复制图片不去保存，图片的地址会是原来的地址，并不是本地的地址。所以我们需要将图片保存到本地，然后就可以将文章获取存入数据库了。

<script>$(document).ready(function () {$('#summernote').summernote({height: 500,width:1000,minHeight: 300,           maxwidth: 1000,minwidth: 200,maxHeight: 500,focus: false,callbacks: {onImageUpload: function (files, editor) {var $files = $(files);// 通过each方法遍历每一个file$files.each(function () {var file = this;// FormData，新的form表单封装，具体可百度，但其实用法很简单，如下var data = new FormData();// 将文件加入到file中，后端可获得到参数名为“file”data.append("file", file);// ajax上传$.ajax({data: data,type: "POST",url: "../../ashx_html/summernote.ashx",// div上的actioncache: false,contentType: false,processData: false,// 成功时调用方法，后端返回json数据success: function (response) {console.log(response)var json = $.parseJSON(response)if (json.state == "error") {alert("上传失败")} else {// 插入到summernote$('#summernote').summernote('insertImage', json.img_url);}},});})}}});});</script>

4.获取编辑器的内容：

var markupStr = $('#summernote').summernote('code');console.log(markupStr)