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

 

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

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

 

基于v0.8.12版本

 

修改summernote.js文件 不要使用min.js文件（以下只是修改的说明，完整的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方法里增加页面按钮代码

 

            '<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({
            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("图片上传失败。");
                }
            });
        }

 

 

 

 

 

 

 

视频后台的上传方法这里就不展示了，这个网上有很多，可以自行百度

 

最终的呈现效果是这样

 

 

修改后的 summernote文件包

下载地址：https://yvioo.lanzous.com/ixLnokm2xjg

 

 

 

以上的只能上传一张，如果要实现批量上传，只需要稍微改下即可，其他不变

 

在上传方法外面加一个for循环即可