Kindeditor视频上传问题处理
初始的时候,video这个标签kindeditor是不识别的,只要html处理或者全屏的时候,都会被排除掉。如果想要video存在,则需要设置属性filterMode :false
如果只是想要某个标签或者属性不被过滤,则需要在下面图1中,htmlTags中进行添加
因为想要在web编辑的时候,就能够展示视频,所以干脆将kindeditor中html的添加的方法进行了一些修改,至于百度上其他人说的加什么插件之类的,感觉有点烦,而且由于网站需要手机端显示,所以就直接把kindeditor.js改动了。
红色部分代码为新增代码(具体图2),只处理mp4情况,具体需求具体修改。这里只处理mp4格式了。如果是mp4格式的文件,则添加的html内容直接使用video标签插入了。
function _mediaImg(blankPath, attrs) {
...
//sldedit 20171129 将mp4格式直接使用video放置html,不过想使用mp4,需要将 filterMode :false,//不开启过滤
if (attrs.src.indexOf(".mp4")!=-1) {
var html = '<video controls="" width="100%" class="' + _mediaClass(type) + '" ';
html += '><source src="' + attrs.src + '" data-ke-src="'+attrs.src+'" >'
html += '</video>';
return html;
}
else {
var html = '<img class="' + _mediaClass(type) + '" src="' + blankPath + '" ';
if (style !== '') {
html += 'style="' + style + '" ';
}
html += 'data-ke-tag="' + escape(srcTag) + '" alt="" />';
return html;
}
}
<!--Kindeditor以及相应的操作-->
<script src="/assets/global/plugins/kindeditor/kindeditor.js" type="text/javascript"></script>
<script src="/assets/global/plugins/kindeditor/lang/zh_CN.js" type="text/javascript"></script>
<script type="text/javascript">
var introEditor;
KindEditor.ready(function (K) {
introEditor = K.create('[name=introduction_show]', {
minWidth: 400,
allowFileManager: true,
filterMode :false,//不开启过滤,全部不开启过滤使用false设置,如果是想要某个不过滤,则需要进入kindeditor.js进行修改
uploadJson: 'xxx',
afterBlur: function () {
this.sync();
$('#showrichtext').html($("[name=introduction_show]").val());
}
});
});
</script>
图1
图2
Kindeditor视频上传问题处理的更多相关文章
- kindeditor图片上传 struts2实现
一.kindeditor以及struts2部署搭建不再赘述,如需要请参考kindeditor使用方法 Struts2框架搭建 二.kindeditor图片上传所依赖jar包在kindeditor\js ...
- bootstrap-fileinput视频上传
在页面编写一个input框: <input id="input-repl-3a" name="videoFileAddress" type="f ...
- 【腾讯云的1001种玩法】 Laravel 整合微视频上传管理能力,轻松打造视频App后台
版权声明:本文由白宦成原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/108597001488193402 来源:腾云阁 h ...
- 微信小程序选择视频,视频上传,视频播放
请查看链接地址看具体详情: 选择视频: https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-video.html#wxchoosevideoobje ...
- 腾讯云点播视频存储(Web端视频上传)
官方文档 前言 所谓视频上传,是指开发者或其用户将视频文件上传到点播的视频存储中,以便进行视频处理.分发等. 一.简介 腾讯云点播支持如下几种视频上传方式: 控制台上传:在点播控制台上进行操作,将本地 ...
- 「小程序JAVA实战」小程序视频上传方法的抽象复用(57)
转自:https://idig8.com/2018/09/23/xiaochengxujavashizhanxiaochengxushipinshangchuanfangfadechouxiangfu ...
- Kindeditor编辑器上传附件,自动获取文件名显示。
大部分在线编辑器在上传附件之后都是会以路径的形式显示出来很不友好.类似这样..怎么样显示成这样用户上传的原始文件名呢.就是这样.是不是看着很友好. kindeditor编辑器上传文件是已插件的形式调用 ...
- HTML+JS实现视频上传显示进度条
示例代码: css部分: #content{border: 1px solid saddlebrown;padding: 16px;border-radius: 2px} .list {top: 15 ...
- Scrum立会报告+燃尽图(十月十五日总第六次):视频上传及选题介绍工作
此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2196 Scrum立会master:田良 一.小组介绍 组长:付佳 组员: ...
随机推荐
- HTTP协议内容1
一.请求协议(浏览器---àserver) 格式: (1) 请求首行 ://请求方式 请求路径 协议和版本 例如:GET /index.html HTTP/1.1 (2) 请求头信息:// ...
- es6学习笔记二:生成器 Generators
今天这篇文章让我感到非常的兴奋,接下来我们将一起领略ES6中最具魔力的特性. 为什么说是“最具魔力的”?对于初学者来说,此特性与JS之前已有的特性截然不同,可能会觉得有点晦涩难懂.但是,从某种意义上来 ...
- Servlet(7)—ServletConfig接口和SevletContext接口
ServletConfig接口 1. 可以获取当前Servlet在web.xml中的配置信息(用的不多) 2. 在不使用"硬编码"的情况下,将部署状态信息传递给Servlet.这个 ...
- ELK架构设计
1.架构一 2.架构二 3.架构三 4.架构四 示例1: 示例二: ELKB简述 E:Elasticsearch 是一个基于Lucene的分布式搜索和分析引擎,具有高可伸缩.高可靠和易管理等特点.支持 ...
- [Canvas]空战游戏 已经可以玩了 1.13Playable
空战游戏做到这里,己方运动,己方发射子弹,敌方运动,敌方发射子弹,子弹与飞机碰撞,飞机与飞机碰撞都已经具备了,换言之已经可以玩了. 还需要一个奖励升级系统,在上面显示击落敌机数量等,还有己方不幸被击落 ...
- SSE图像算法优化系列二十三: 基于value-and-criterion structure 系列滤波器(如Kuwahara,MLV,MCV滤波器)的优化。
基于value-and-criterion structure方式的实现的滤波器在原理上其实比较简单,感觉下面论文中得一段话已经描述的比较清晰了,直接贴英文吧,感觉翻译过来反而失去了原始的韵味了. T ...
- C# System.IO.StreamWriter
实现一个 TextWriter,使其以一种特定的编码向流中写入字符. using System; using System.Collections.Generic; using System.Linq ...
- Sandcastle Help File Builder(.NET帮助文档工具)的版本选择心得——支持VS2010至VS2015,高版本项目文件问题
作者: zyl910 一.缘由 "Sandcastle Help File Builder"(简称SHFB)是一个很好用.NET 帮助文档生成工具. 但它的每个版本支持的VS版本范 ...
- [转]epoll详解
什么是epollepoll是什么?按照man手册的说法:是为处理大批量句柄而作了改进的poll.当然,这不是2.6内核才有的,它是在2.5.44内核中被引进的(epoll(4) is a new AP ...
- 【Nginx】Nginx在Linux下的入门介绍
Nginx的安装 下载.解压 从Nginx下载安装包,我下的是nginx-1.8.0.tar.gz.解压后的目录为: [root@blog third_package]# tar -zxf nginx ...