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循环即可
summernote富文本图片上传,增加视频上传功能、批量上传方法的更多相关文章
- vue-quill-editor + element-ui upload实现富文本图片上传
代码贴上 <template> <div class="quill-editor-example"> <div class="box&quo ...
- Selenium常用API用法示例集----下拉框、文本域及富文本框、弹窗、JS、frame、文件上传和下载
元素识别方法.一组元素定位.鼠标操作.多窗口处理.下拉框.文本域及富文本框.弹窗.JS.frame.文件上传和下载 元素识别方法: driver.find_element_by_id() driver ...
- summernote富文本编辑器的使用
最近在开发一个微信公众号的后台,微信公众号编辑的文章一直没有得到很好地适应,大多数人也是在其他的编辑软件中编辑好之后直接去复制到微信公众平台中,考虑到复制后会排版出现问题,所以给大家推荐一款很不错的W ...
- summernote富文本编辑器配合validate表单验证无法进行表单提交的问题
1.使用summernote富文本编辑器提交图片到服务器 在使用bootstrap中,我们用到了summernote富文本编辑器,使用summernote将图片上传到服务器中,参考我的上篇文章http ...
- 商城项目整理(四)JDBC+富文本编辑器实现商品增加,样式设置,和修改
UEditor富文本编辑器:http://ueditor.baidu.com/website/ 相应页面展示: 商品添加: 商品修改: 前台商品展示: 商品表建表语句: create table TE ...
- java通过freemarker导出包含富文本图片的word文档
废话不多说,进入正题! 本文重点在于:对富文本图片的导出(基础的freemarker+word模板导出这里不做详细解说哈) 参考文章:http://www.cnblogs.com/liaofeifig ...
- summernote富文本编辑器
下载summernote官方demo,解压,把文件夹中的summernote.js,summernote.css和font整个文件夹都放到服务器对应的项目目录里 引入summernote 所需要的bo ...
- ASP.NET MVC + 百度富文本编辑器 + EasyUi + EntityFrameWork 制作一个添加新闻功能
本文将交大伙怎么集成ASP.NET MVC + 百度富文本编辑器 + EasyUi + EntityFrameWork来制作一个新闻系统 先上截图: 添加页面如下: 下面来看代码部分 列表页如下: @ ...
- Android源代码分析之拍照、图片、录音、视频和音频功能
Android源代码分析之拍照.图片.录音.视频和音频功能 //选择图片 requestCode 返回的标识 Intent innerIntent = new Intent(Intent.ACTI ...
随机推荐
- Codeforces 251D - Two Sets(异或方程组)
题面传送门 题意: 你有一个可重集 \(S=\{a_1,a_2,\dots,a_n\}\),你要把它划分成两个可重集 \(S_1,S_2\) 使得 \(S\) 中每个元素都恰好属于 \(S_1\) 与 ...
- 如何利用efetch从NCBI中批量下载数据?
目录 找序列 下序列 假设我要从NCBI中下载全部水稻的mRNA序列,如何实施? 找序列 第一步,肯定是找到相关序列. 我从ncbi taxonomy进入,搜索oryza.因为要搜索mRNA核酸序列, ...
- SSH客户端工具连接Linux(有的也可以连接Windows、mac、iOS等多系统平台)
要远程操作Linux的话还是得靠SSH工具,一般来说,Linux是打开了默认22端口的SSH的服务端,如果我们要远程它的话,就需要一个SSH客户. 我对一款好用的工具主要需要满足以下几点. (1)连接 ...
- Excel-计算年龄、工龄 datedif()
函数名称:DATEDIF 主要功能:计算返回两个日期参数的差值. 使用格式:=DATEDIF(date1,date2,"y").=DATEDIF(date1,date2," ...
- Oracle-一张表中增加计算某列值重复的次数列,并且把表中其他列也显示出来,或者在显示过程中做一些过滤
总结: 1.计算某列值(数值or字符串)重复的次数 select 列1,count( 列1 or *) count1 from table1 group by 列1 输出的表为:第一列是保留唯一值的 ...
- linux系统中安装JDK
安装之前的准备工作 查看系统中之前安装好的JDK java –version rpm -qa | grep java 卸载JDK (以java-1.7.0-openjdk-1.7.0.45-2.4.3 ...
- 巩固javaweb的第二十天
巩固内容: 同一个页面中的多个 form 在同一个页面中可以有多个 form 如果存在多个 form,那么提交信息的时候提交哪些信息,提交给哪个文件处理,这都 与提交按钮的位置有关.如果提交按钮在第一 ...
- 基于树莓派部署 code-server
code-server 是 vscode 的服务端程序,通过部署 code-server 在服务器,可以实现 web 端访问 vscode.进而可以达到以下能力: 支持跨设备(Mac/iPad/iPh ...
- HDFS初探之旅(一)
1.HDFS简介 ...
- Android: EditText设置属性和设置输入规则
1.EditText输入限制规则 在xml:EditText 设置属性 android:digits="ABCDE123&*" ABCDE123&*是你的限制规则 ...