小巧强大的Web富文本编辑器summernote使用分享

summernote是一款小巧强大的web富文本编辑器，支持代码高亮、图片上传、视频插入等功能。

之前一直使用的是百度的UEditor,这是一款非常强大的富文本编辑器，不过也相对比较臃肿，自从发现了summernote之后，小巧不失强大，简直爱不释手。

在我博客的搭建的过程中使用了summernote，搭配上另一款同样小巧强大的Markdown编辑器mditor，满足博客文章内容编辑的基本需求。

所以我将这款web富文本编辑器 summernote分享给大家。

summernote和mditor的下载地址：

summernote官网地址：https://summernote.org

summernote Github地址：https://github.com/summernote/summernote/

mditor官网地址：http://mditor.com/

mditor Github地址：https://github.com/Houfeng/mditor

使用步骤：

1.根据官方使用文档，引入如下的js 和 css文件：

<!-- include libraries(jQuery, bootstrap) -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script> 

<!-- include summernote css/js-->
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.js"></script>

2.summernote初始化配置代码如下：

html中加上容器：

<div class="summernote">

</div>

js中初始化summernote插件：

DATA.htmlEditor = $('.summernote').summernote({
    lang: 'zh-CN',
    height: 340,
    placeholder: '写点儿什么吧...',
    //上传图片的接口
    callbacks:{
        onImageUpload: function(files) {
            var data=new FormData();
            data.append('file',files[0]);
            App.blockUI();
            $.ajax({
                url: '/file/upload',     //上传图片请求的路径
                method: 'POST',            //方法
                data:data,                 //数据
                processData: false,        //告诉jQuery不要加工数据
                dataType:'json',
                contentType: false,        //<code class="javascript comments"> 告诉jQuery,在request head里不要设置Content-Type
                success: function(result) {
                    App.unblockUI();
                    if(result && result.code == '0000'){
                        var url = result.data;
                        console.log('url =>' + url);
                        DATA.htmlEditor.summernote('insertImage', url);
                    } else {
                        layer.alert(result.message || '图片上传失败');
                    }
                }
            });
        }
    }
});