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