5.jQuery使用sunnmenote编辑器

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上的action
                                cache: 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)