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 ...
随机推荐
- SPOJ 1557 GSS2 - Can you answer these queries II (线段树+维护历史最值)
都说这题是 GSS 系列中最难的,今天做了一下,名副其实 首先你可以想到各种各样的在线乱搞想法,线段树,主席树,平衡树,等等,但发现都不太可行. 注意到题目也没有说强制在线,因此可以想到离线地去解决这 ...
- Codeforces 1129D - Isolation(分块优化 dp)
Codeforces 题目传送门 & 洛谷题目传送门 又独立切了道 *2900( 首先考虑 \(dp\),\(dp_i\) 表示以 \(i\) 为结尾的划分的方式,那么显然有转移 \(dp_i ...
- VSCode + PicGo + Github + jsDelivr 搭建稳定快速高效图床
VSCode + PicGo + Github + jsDelivr 搭建稳定快速高效图床 目录 前言 准备 配置 验证 前言 所谓图床,就是将图片储存到第三方静态资源库中,其返回给你一个 URL 进 ...
- Python三元表达式,列表推导式,字典生成式
目录 1. 三元表达式 2. 列表推导式 3. 字典生成式 3.1 字典生成式 3.2 zip()方法 1. 三元表达式 """ 条件成立时的返回值 if 条件 else ...
- Linux-各种姿势(less\vi等)打开各种类型的文件(txt/csv/xlsx等)出现不能打开(全乱码、部分乱码、二进制文件等)的问题
(一)linux各种中文乱码解决办法整理 远程登录服务器用vim在终端下编辑查看文件经常会遇见各种中文乱码问题. 做如下设置可基本解决vim中文乱码问题,首先查看系统对中文的支持locale -a | ...
- 34、在排序数组中查找元素的第一个和最后一个位置 | 算法(leetode,附思维导图 + 全部解法)300题
零 标题:算法(leetode,附思维导图 + 全部解法)300题之(34)在排序数组中查找元素的第一个和最后一个位置 一 题目描述 二 解法总览(思维导图) 三 全部解法 1 方案1 1)代码: / ...
- C#表头固定
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="info.ascx.cs& ...
- 线性表A,B顺序存储合并
线性表A,B顺序存储合并 有两张非递增有序的线性表A,B,采用顺序存储结构,两张表合并用c表存,要求C为非递减有序的,然后删除C表中值相同的多余元素.元素类型为整型 输入格式: 第一行输入输入表A的各 ...
- 「Spark从精通到重新入门(一)」Spark 中不可不知的动态优化
前言 Apache Spark 自 2010 年面世,到现在已经发展为大数据批计算的首选引擎.而在 2020 年 6 月份发布的Spark 3.0 版本也是 Spark 有史以来最大的 Release ...
- A Child's History of England.17
CHAPTER 6 ENGLAND UNDER HAROLD HAREFOOT, HARDICANUTE, AND EDWARD THE CONFESSOR Canute left three son ...