summernote支持视频上传功能，综合几个版本亲测可用

原框架只支持视频链接上传，局限性比较大，不能上传本地的视频，综合这我查了几天资料 ，有个版本要么可用但是部分图标显示错误，综合0.8.12和0.8.18 版本整理。增加上传内容转载其他处，其余的均是自己代码或整理

基于v0.8.12版本

修改summernote.js文件 不要使用min.js文件

1、 在 callbacks里增加一个 onFileUpload: null,

2、在video方法里面增加 attachment: 'Attachment', 后面的值就是页面上显示的名称 这里可以自己改。 

3、在VideoDialog.prototype.showVideoDialog方法里增加

var $videoAttachment = _this.$dialog.find('.note-video-attachment');
var callbacks = _this.options.callbacks;

　　　　　　　　　　$videoAttachment.off('change');
                    $videoAttachment.on('change', function (event) {
                        if (callbacks.onFileUpload) {
                            console.log(event.target.files);
                            _this.context.triggerEvent('file.upload',                                 event.target.files);
                        }
                    });

_this.bindEnterKey($videoAttachment,$videoBtn);

如图所示，注意位置 不要加错 

4、在VideoDialog.prototype.initialize方法里增加页面按钮代码

  '
',
            "" + this.lang.video.attachment + "",
            '',
            '
',

 

 

添加好了之后，页面效果是这样的 会多一个附件上传按钮

 这里的名字再第一步的时候可任意修改

接下来我们写页面的上传方法

$('.summernote').summernote({
            placeholder: '请输入内容',
            height : 192,
            lang : 'zh-CN',
            followingToolbar: false,
            callbacks: {
                onImageUpload: function (files) {
                    //图片上传
                    sendFile(files[0], this);
                },
                onFileUpload: function(files) {
                    //附件上传
                    sendVideoFile(files[0], this);
                }

            }
        });


 // 上传视频文件 
function sendVideoFile(files, editor, $editable) {
    var size = files[0].size;
    if((size / 1024 / 1024) > 10) {
        alert("视频大小不能超过10M...");
        return false;
    }
    console.log("size="+size);
    var formData = new FormData();
    formData.append("file", files[0]);
    $.ajax({
        data : formData,
        type : "POST",
        url : "/common/sysFile/upload2",    // 图片上传出来的url，返回的是图片上传后的路径，http格式
        cache : false,
        contentType : false,
        processData : false,
        dataType : "json",
        success: function(data) {//data是返回的hash,key之类的值，key是定义的文件名
            $(".note-video-url").val(data.fileName);
            //去掉插入视频禁用按钮
            $(".note-video-btn").removeAttr("disabled");
             /*if (result.code == web_status.SUCCESS) {
                 //上传之后的url赋值到 视频地址文本框
                 $(".note-video-url").val(result.url);
                 //去掉插入视频禁用按钮
                 $(".note-video-btn").removeAttr("disabled");
             } else {
                 $.modal.alertError(result.msg);
             }*/
        },
        error:function(){
            alert("视频上传失败");
        }
    });
}

 // 上传图片文件
function sendFile(files, editor, $editable) {
    var size = files[0].size;
    if((size / 1024 / 1024) > 10) {
        alert("图片大小不能超过10M...");
        return false;
    }
    console.log("size="+size);
    var formData = new FormData();
    formData.append("file", files[0]);
    $.ajax({
        data : formData,
        type : "POST",
        url : "/common/sysFile/upload2",    // 图片上传出来的url，返回的是图片上传后的路径，http格式
        cache : false,
        contentType : false,
        processData : false,
        dataType : "json",
        success: function(data) {//data是返回的hash,key之类的值，key是定义的文件名
            $('.summernote').summernote('insertImage',data.fileName);
        },
        error:function(){
            alert("上传失败");
        }
    });
}

后台的上传方法:

    @ResponseBody
    @PostMapping("/upload2")
    R upload2(@RequestParam("file") MultipartFile file, HttpServletRequest request) {
        String fileName = file.getOriginalFilename();
        fileName = FileUtil.renameToUUID(fileName);
        FileDO sysFile = new FileDO(FileType.fileType(fileName), String.valueOf(getUserId())+"/"+ fileName, new Date());
        try {
            FileUtil.uploadFile(file.getBytes(), bootdoConfig.getUploadPath()+String.valueOf(getUserId()+"/"), fileName);
        } catch (Exception e) {
            return R.error();
        }
        Random rd=new Random();
        sysFile.setId(System.currentTimeMillis()+""+rd.nextInt(1000));
        if (sysFileService.save(sysFile) > 0) {
            return R.ok().put("fileName",bootdoConfig.getIpaddress()+"/upload/"+sysFile.getUrl());
        }
        return R.error();
    }

 最终的呈现效果是这样

最后发发现这个版本部分控件的图标不显示，后面找到0.8.18的几个包才改好，附件好像放不了,可私信我，主要是font包里的图标样式。