summernote富文本编辑框的使用

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

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

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

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

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

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

  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的初次使用，亲测可用。有不对的地方还望大家指点。。。