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











你可能感兴趣的:(summernote富文本编辑框的使用)