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富文本图片上传,增加视频上传功能、批量上传方法的更多相关文章

  1. vue-quill-editor + element-ui upload实现富文本图片上传

    代码贴上 <template> <div class="quill-editor-example"> <div class="box&quo ...

  2. Selenium常用API用法示例集----下拉框、文本域及富文本框、弹窗、JS、frame、文件上传和下载

    元素识别方法.一组元素定位.鼠标操作.多窗口处理.下拉框.文本域及富文本框.弹窗.JS.frame.文件上传和下载 元素识别方法: driver.find_element_by_id() driver ...

  3. summernote富文本编辑器的使用

    最近在开发一个微信公众号的后台,微信公众号编辑的文章一直没有得到很好地适应,大多数人也是在其他的编辑软件中编辑好之后直接去复制到微信公众平台中,考虑到复制后会排版出现问题,所以给大家推荐一款很不错的W ...

  4. summernote富文本编辑器配合validate表单验证无法进行表单提交的问题

    1.使用summernote富文本编辑器提交图片到服务器 在使用bootstrap中,我们用到了summernote富文本编辑器,使用summernote将图片上传到服务器中,参考我的上篇文章http ...

  5. 商城项目整理(四)JDBC+富文本编辑器实现商品增加,样式设置,和修改

    UEditor富文本编辑器:http://ueditor.baidu.com/website/ 相应页面展示: 商品添加: 商品修改: 前台商品展示: 商品表建表语句: create table TE ...

  6. java通过freemarker导出包含富文本图片的word文档

    废话不多说,进入正题! 本文重点在于:对富文本图片的导出(基础的freemarker+word模板导出这里不做详细解说哈) 参考文章:http://www.cnblogs.com/liaofeifig ...

  7. summernote富文本编辑器

    下载summernote官方demo,解压,把文件夹中的summernote.js,summernote.css和font整个文件夹都放到服务器对应的项目目录里 引入summernote 所需要的bo ...

  8. ASP.NET MVC + 百度富文本编辑器 + EasyUi + EntityFrameWork 制作一个添加新闻功能

    本文将交大伙怎么集成ASP.NET MVC + 百度富文本编辑器 + EasyUi + EntityFrameWork来制作一个新闻系统 先上截图: 添加页面如下: 下面来看代码部分 列表页如下: @ ...

  9. Android源代码分析之拍照、图片、录音、视频和音频功能

    Android源代码分析之拍照.图片.录音.视频和音频功能   //选择图片 requestCode 返回的标识 Intent innerIntent = new Intent(Intent.ACTI ...

随机推荐

  1. DirectX12 3D 游戏开发与实战第五章内容

    渲染流水线 学习目标: 了解用于在2D图像中表现出场景立体感和空间深度感等真实效果的关键因素 探索如何用Direct3D表示3D对象 学习如何建立虚拟摄像机 理解渲染流水线,根据给定的3D场景的几何描 ...

  2. 【机器学习与R语言】6-线性回归

    目录 1.理解回归 1)简单线性回归 2)普通最小二乘估计 3)相关系数 4)多元线性回归 2.线性回归应用示例 1)收集数据 2)探索和准备数据 3)训练数据 4)评估模型 5)提高模型性能 1.理 ...

  3. TensorFlow 2.0 深度学习实战 —— 浅谈卷积神经网络 CNN

    前言 上一章为大家介绍过深度学习的基础和多层感知机 MLP 的应用,本章开始将深入讲解卷积神经网络的实用场景.卷积神经网络 CNN(Convolutional Neural Networks,Conv ...

  4. 日常Java 2021/10/21

    Java Iterator(迭代器) 如果需要使用iterator类需要从java.util包中引入它 Java Iterator不是一个集合,它是一种访问集合的方法,用于迭代ArrayList和Ha ...

  5. A Child's History of England.16

    CHAPTER 5 ENGLAND UNDER CANUTE THE DANE Canute reigned eighteen years. He was a merciless King at fi ...

  6. day11 系统安全

    day11 系统安全 复习总结 文件 1.创建 格式:touch [路径] [root@localhost ~]# touch 1.txt # 当前路径创建 [root@localhost ~]# t ...

  7. Spark Stage 的划分

    Spark作业调度 对RDD的操作分为transformation和action两类,真正的作业提交运行发生在action之后,调用action之后会将对原始输入数据的所有transformation ...

  8. spring boot集成mybatis框架

    概述 中文官网:http://www.mybatis.cn 参考教程:https://www.w3cschool.cn/mybatis MyBatis Plus:http://mp.baomidou. ...

  9. VScode 使用 CMake 入门

    参考 CMake 入门实战 在 linux 平台下使用 CMake 生成 Makefile 并编译的流程如下: 编写 CMake 配置文件 CMakeLists.txt . 执行命令 cmake PA ...

  10. sql优化的8种方式

    1.设置索引. MySQL索引操作:给表列创建索引: 建表时创建索引: create table t(id int,name varchar(20),index idx_name (name)); 给 ...