summernote富文本图片上传，增加视频上传功能、批量上传方法

Summernote 是一个简单灵活的所见即所得的 HTML 在线编辑器，基于 jQuery 和 Bootstrap 构建，支持快捷键操作，提供大量可定制的选项。

但是却只有图片上传功能，没有视频上传功能，这里演示怎么增加一个视频上传功能（批量上传写法在最下方）

基于v0.8.12版本

修改summernote.js文件不要使用min.js文件（以下只是修改的说明，完整的js文件我也放到最后了）

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

summernote富文本图片上传，增加视频上传功能、批量上传方法

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

summernote富文本图片上传，增加视频上传功能、批量上传方法

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);

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

summernote富文本图片上传，增加视频上传功能、批量上传方法

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

            '<div class="form-group note-form-group">',

            "<label class=\"note-form-label\">" + this.lang.video.attachment + "</label>",

            '<input class="note-video-attachment form-control note-form-control note-input" type="file" />',

            '</div>',

summernote富文本图片上传，增加视频上传功能、批量上传方法

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

summernote富文本图片上传，增加视频上传功能、批量上传方法

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

$('.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(file, obj) {

            var data = new FormData();

            data.append("file", file);

            $.ajax({

                type: "POST",

                url: ctx + "common/upload",

                data: data,

                cache: false,

                contentType: false,

                processData: false,

                dataType: 'json',

                success: function(result) {

                    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(error) {

                    $.modal.alertWarning("视频上传失败。");

                }

            });

        }

        // 上传图片文件

        function sendFile(file, obj) {

            var data = new FormData();

            data.append("file", file);

            $.ajax({

                type: "POST",

                url: ctx + "common/upload",

                data: data,

                cache: false,

                contentType: false,

                processData: false,

                dataType: 'json',

                success: function(result) {

                    if (result.code == web_status.SUCCESS) {

                        $(obj).summernote('editor.insertImage', result.url, result.fileName);

                    } else {

                        $.modal.alertError(result.msg);

                    }

                },

                error: function(error) {

                    $.modal.alertWarning("图片上传失败。");

                }

            });

        }