editormd支持上传视频
editormd支持上传视频
editormd
是一款非常不错的Markdown在线编辑器。
最近需要把该编辑器集成到项目中,需要上传图片和视频,editormd
自带的image-dialog
插件是已经支持上传图片了,但是从官网上没找到视频上传的插件。于是想对image-dialog
插件二次开发,让该插件同时支持上传图片和视频。
当然可以从网上找下其他人有没有做过类似的插件,不过没有这样做,因为自己做一个也不难。也可以新作一个专门用于视频上传的插件,需要在工具栏上新增图标,考虑到工具栏上已经很多图标了,还是合并在一起,更简洁。
下面是记录的让editormd
支持上传视频的步骤,主要修改的文件是plugins/image-dialog
目录的image-dialog.js
。由于本人不是专业的前端,如果不当之处,还请多多指正!
1. 支持”.mp4”文件
image-dialog
插件会对文件的后缀名进行判断,如果不符合要求就不会处理。
为了让其上传”.mp4”格式的文件,需要在editormd
初始化的配置对象中,把imageFormats
字段的值加上 “mp4”,添加后如下:
imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp", "mp4"],
2.修改上传对话框上的文字
image-dialog.js
中,与上传对话框上说明文字相关的变量为 imageLang
。
打开image-dialog.js
, 在var dialogContent = ( (settings.imageUpload) ....
这段代码前面加上:
imageLang.title = "添加图片/视频";
imageLang.url = "图片/视频地址";
imageLang.alt = "图片/视频描述";
imageLang.link = "图片/视频链接";
3. 让文件选择对话框支持显示视频文件
默认情况下,image-dialog
打开的文件选择对话框打开时,默认筛选出的是图片文件,既然我们需要上传视频,就要让它把视频文件也筛选出来。如下:
打开image-dialog.js
,还是找到var dialogContent = ( (settings.imageUpload) ....
这部分代码,找到accept=\"image/*\"
这部分,改为accept=\"image/*,video/*\"
。
4.调整上传对话框样式
由于上传对话框上的文字字数增加了,对话框的样式有些不好看,需要的话可以用jQuery
动态调整下。
打开image-dialog.js
,找到这行代码var fileInput = dialog.find("[name=\"" + classPrefix + "image-file\"]");
,在其前面插上如下代码:
$(".editormd-image-dialog").css({'width': '500px'});
$(".editormd-dialog-container").css({'top': '-18px'});
$(".editormd-form label").css({'width': '105px'});
5.生成视频的HTML代码
视频上传成功后,点击”确定“按钮,需要生成视频的HTML代码片段。
打开image-dialog.js
,找到这一部分代码:
dialog = this.createDialog({title : imageLang.title,width : (settings.imageUpload) ? 465 : 380,height : 254,name : dialogName,content : dialogContent,mask : settings.dialogShowMask,drag : settings.dialogDraggable,lockScreen : settings.dialogLockScreen,maskStyle : {opacity : settings.dialogMaskOpacity,backgroundColor : settings.dialogMaskBgColor},buttons : {enter : [lang.buttons.enter, function() {var url = this.find("[data-url]").val();var alt = this.find("[data-alt]").val();var link = this.find("[data-link]").val();if (url === ""){alert(imageLang.imageURLEmpty);return false;}...}}
}
在上面代码的省略号处,插入如下代码:
if (url.endsWith(".mp4")) {var videoHtml = '<video class="video-js" controls preload="auto" width="100%" poster="" data-setup=\'{"aspectRatio":"16:9"}\'>\
<source src="' + url + '" type=\'video/mp4\' >\<p class="vjs-no-js">\
To view this video please enable JavaScript\
</p>\
</video>';videoHtml = "\n" + videoHtml + "\n";cm.replaceSelection(videoHtml);cm.setCursor(cursor.line, cursor.ch + 2);this.hide().lockScreen(false).hideMask();return false;
}
其中,最后3行代码与处理图片上传结果的代码是一样的,因为代码行数不多,也不想改动后面的代码,所以就多写了几行。否则,需要把处理图片上传结果的代码放在 该if
语句的else
部分。
6.后端支持视频文件上传
这个就不用多讲了,自己发挥。
editormd支持上传视频相关推荐
- 极客日报第 66 期:人人影视字幕组因侵权被查;GitHub 评论区支持上传视频;拼多多将春节红包加至 28 亿;任正非就注册姚安娜商标事件道歉
文章目录 一.互联网快讯 二.程序员专属 三.Github 每日精选 四.CSDN 社区优质博文精选 一.互联网快讯 1.用户起诉腾讯,深圳南山法院一审判决认定:微信好友关系不属于个人隐私 2 月 3 ...
- 极客日报:人人影视字幕组因侵权被查;GitHub 评论区支持上传视频;
一.互联网快讯 1.用户起诉腾讯,深圳南山法院一审判决认定:微信好友关系不属于个人隐私 2 月 3 日消息,1 月 22 日,深圳市南山区人民法院在审理一起用户起诉腾讯的侵权责任纠纷案时作出判决,明确 ...
- GitHub 支持上传视频文件啦!
大家好,我是若川.今天周六,分享一篇热点新闻.文章较短,预计5分钟可看完. 近日 Github 宣布支持了视频上传功能,意味着,大家在提 issue 时可以携带视频了,这极大地提高了开发者和维护者的效 ...
- 通过h5页面上传视频到Linux服务器
1. 上传视频到本地 https://www.jb51.net/article/132531.htm 2. 上传视频到Linux服务器 建立ftp连接(保证服务器已经安装ftp及对应端口,帐号有权限) ...
- java 上传视频并播放_java实现视频上传和播放..doc
java实现视频上传和播放. Java实现视频网站的视频上传.视频转码.视频关键帧抽图, 及视频播放功能 视频网站中提供的在线视频播放功能,播放的都是FLV格式的文件,它是Flash动画文件,可通过F ...
- CKEditor上传视频(java)
CKEditor上传视频 CKEditor批量上传图片 flvplayer.swf播放器 CKEditor整合包(v4.6.1) ----------------------------------- ...
- KindEditor解决上传视频不能在手机端显示的问题
KindEditor自带的上传视频生成的HTML代码为<embed>,在手机端并不支持.于是可以自己在控件里增加生成video标签相关代码. 参考https://www.jianshu.c ...
- 腾讯视频下载安装_如何上传视频到腾讯视频平台
播放器软件很多,本文小编给大家推荐腾讯视频.我们可以在腾讯视频播放器上,观看各种电视剧.电影.综艺节目等内容.里面的大部分视频都是免费的,部分独播大剧可能会存在vip收费的情况,这也是无法避免的.腾讯 ...
- 电脑字体模糊_小红书上传视频模糊?做小红书视频99%的工具都在这了
到现在小红书视频号功能已经上线快三个月了,越来越多的小伙伴开始拍视频.创作视频笔记,但是对于新接触视频的小伙伴来说,拍摄视频好像是一件很难的事,特别是不清楚该选择什么拍摄设备.不知道怎么剪辑视频,还有 ...
- Springboot上传视频到阿里云(视频点播)和aliyun-java-sdk-vod依赖报红问题
一.pom.xm中导入依赖 <dependency><groupId>com.aliyun</groupId><artifactId>aliyun-ja ...
最新文章
- 是否能被3,5,7同时整除(3.4)(Java)
- C++文件头,命名空间,new和delete,内联函数,引用,函数重载,构造函数和析构函数,深拷贝和浅拷贝,explict,this指针
- 检索数据_16_按照某个模式搜索
- poj1743 Musical Theme
- linux重新安装xrog文件,Linux下重新生成xorg.conf
- 使用JavaScript弹出Confirm对话框
- php调用python导出excel_如何使用Django导出Excel代码问题
- 基于nvidia的ffmpeg编解码加速
- 计算机输出科学计数法,python不用科学计数法
- 显示器性能测试软件,MonitorTest(显示器性能测试软件) V4.0.1001 官方版
- 卷积神经网络原理与实现过程
- WPS Word 快捷键大全
- 日常生活 - 打印机如何扫描文件到电脑上
- box-sizing属性介绍
- idea 无法加载识别本地类
- repo拉代码The remote end hung up unexpectedly解决方法
- elasticsearch6.8.4-docker部署升级方式以及安全加密
- 2022年施工员-市政方向-通用基础(施工员)考试题模拟考试平台操作
- 选题阶段:课堂展示脚本
- OpenGL学习脚印:伽马校正(Gamma Correction)