summernote富文本编辑框的使用

由于之前项目中富文本编辑框中上传图片功能中只能添加图片url，不能从本地上传，这个问题在好多国外富文本编辑软件中都得以体现，所以准备换一个。

   项目是采用springmvc+angularjs+bootstarp+H5构建的，网上富文本编辑框多种多样，就配合项目找一个summernote来用吧，通过查看官方文档和网上的参考资料以及自己的摸索，要不了多长时间就搞定了，在这儿说一下详细步骤：

  1、从官网下载开发版summernote文件加入项目中

  2、从文件中找出summernote.css与summernote.js导入当前页面

  3、在页面合适位置插入代码：

class="summernote" name="htmlcontent2" ng-model="product.productDescribe" ta-disabled='disabled'>

  4、重点开始了，后几步所需要的代码会附图，这里简单说一下，先初始化summernote，

$('.summernote').summernote(）;

这个不难，稍有难度的在下一步

  5、由于summernote默认是以二进制形式存入数据库的，而我们一般会只存图片路径，所以上传图片的方法要重写

 ，这是最麻烦的地方

  6、获取文本编辑内容，网上看到的是

 $('.summernote').code（）;

 然而写出来是行不通的，后来才发现这个是以前的方法，现在是这个

 $('.summernote').summernote('code');

 7、剩下的就是配合你的代码该上传上传，该提交提交了

这个是完整的配置、上传、获取内容代码

$(document).ready(function() {
    $('.summernote').summernote({
        height: 300,
        width:800,
        lang: 'zh-CN',
        focus:true,
        toolbar: [
            ['style', ['bold', 'italic', 'underline', 'clear']],
            ['fontsize', ['fontsize']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['height', ['height']],
            ['insert', ['picture', 'video']]
        ],
        callbacks: {
            // onImageUpload的参数为files，summernote支持选择多张图片
            onImageUpload : function(files) {
                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 : "/action/sysUpload/uploadProductImage",// div上的action
                        cache : false,
                        contentType : false,
                        processData : false,
                        // 成功时调用方法，后端返回json数据
                        success : function(response) {
                            console.log(response+response.status+response.data);
                            if (response.status==1) {
                                // 文件不为空
                                if (response.data) {
                                    // 获取后台数据保存的图片完整路径
                                    var imageUrl =response.data[0];
                                    // 插入到summernote
                                    $('.summernote').summernote('insertImage', imageUrl, function($image) {
                                       
                                    });
                                }
                            }

                        },
                     
                    });
                });
            }
        }
    });

});

function getContext(n){
    var sHTML = $('.summernote').eq(n).summernote('code');
   return sHTML;
}

最后解释一下，callbacks中时重写的上传图片方法，遍历图片利用ajax上传至后台，然后拿到存放路径进入回调方法

并插入文本编辑框中，这里没做错误判断，需要的自行添加就可以，最后的获取文本内容，由于用的spa单页面应用，一个页面中存在多个编辑框，所以用n来获取某一个并返回。

  以上便是对于summernote的初次使用，亲测可用。有不对的地方还望大家指点。。。