summernote插件

summernote插件修改上传图片存储到服务器

summernote插件默认是将图片转换成base64码,存储在数据库中,这样虽能实现功能且使用灵活但是对服务器的压力较大
在这里我们将summernote插件改造,使之异步上传图片到服务器,将路径存储近数据库
(本篇博文和node上传图片一文可结合使用).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
$('#summernote').summernote({
    lang: 'zh-CN',
    minHeight: 400,
    focus: true,
    // toolbar: [
    //     ['style', ['bold', 'italic', 'underline', 'clear']],
    //     ['fontsize', ['fontsize']],
    //     ['color', ['color']],
    //     ['para', ['ul', 'ol', 'paragraph']],
    //     ['height', ['height']],
    //     ['insert', ['picture', 'video']]],
    callbacks: {
        onImageUpload: function(files, editor, $editable) {
            sendFile(files);
        }
    }

});


function sendFile(files, editor, $editable) {
    var data = new FormData();
    data.append("ajaxTaskFile", files[0]);
    $.ajax({
        data : data,
        type : "POST",
        url : "/admin/uploadImage", //图片上传出来的url，返回的是图片上传后的路径，http格式
        cache : false,
        contentType : false,
        processData : false,
        dataType : "json",
        success: function(data) {//data是返回的hash,key之类的值，key是定义的文件名
            $('#summernote').summernote('insertImage', data.src);
        },
        error:function(){
            alert("上传失败");
        }
    });
}