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

原框架仅支持视频链接上传,局限性大。博主综合v0.8.12和v0.8.18版本进行整理,先基于v0.8.12版本修改summernote.js文件,增加相关代码实现附件上传按钮。接着给出页面和后台的上传方法代码,最后解决了部分控件图标不显示问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

原框架只支持视频链接上传,局限性比较大,不能上传本地的视频,综合这我查了几天资料 ,有个版本要么可用但是部分图标显示错误,综合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方法里增加页面按钮代码

  '<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(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包里的图标样式。

评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值