初始的时候,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视频上传问题处理的更多相关文章

  1. kindeditor图片上传 struts2实现

    一.kindeditor以及struts2部署搭建不再赘述,如需要请参考kindeditor使用方法 Struts2框架搭建 二.kindeditor图片上传所依赖jar包在kindeditor\js ...

  2. bootstrap-fileinput视频上传

    在页面编写一个input框: <input id="input-repl-3a" name="videoFileAddress" type="f ...

  3. 【腾讯云的1001种玩法】 Laravel 整合微视频上传管理能力,轻松打造视频App后台

    版权声明:本文由白宦成原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/108597001488193402 来源:腾云阁 h ...

  4. 微信小程序选择视频,视频上传,视频播放

    请查看链接地址看具体详情: 选择视频: https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-video.html#wxchoosevideoobje ...

  5. 腾讯云点播视频存储(Web端视频上传)

    官方文档 前言 所谓视频上传,是指开发者或其用户将视频文件上传到点播的视频存储中,以便进行视频处理.分发等. 一.简介 腾讯云点播支持如下几种视频上传方式: 控制台上传:在点播控制台上进行操作,将本地 ...

  6. 「小程序JAVA实战」小程序视频上传方法的抽象复用(57)

    转自:https://idig8.com/2018/09/23/xiaochengxujavashizhanxiaochengxushipinshangchuanfangfadechouxiangfu ...

  7. Kindeditor编辑器上传附件,自动获取文件名显示。

    大部分在线编辑器在上传附件之后都是会以路径的形式显示出来很不友好.类似这样..怎么样显示成这样用户上传的原始文件名呢.就是这样.是不是看着很友好. kindeditor编辑器上传文件是已插件的形式调用 ...

  8. HTML+JS实现视频上传显示进度条

    示例代码: css部分: #content{border: 1px solid saddlebrown;padding: 16px;border-radius: 2px} .list {top: 15 ...

  9. Scrum立会报告+燃尽图(十月十五日总第六次):视频上传及选题介绍工作

    此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2196 Scrum立会master:田良 一.小组介绍 组长:付佳 组员: ...

随机推荐

  1. Charles抓包(未完待续)

    Charles是在 Mac 下常用的网络封包截取工具,在做移动开发时,我们为了调试与服务器端的网络通讯协议,常常需要截取网络封包来分析. Charles 通过将自己设置成系统的网络访问代理服务器,使得 ...

  2. python之函数第二篇

    一.名称空间与作用域 名称空间分类: 内置名称空间 import this dir(buil-in) 查看全部内置 全局名称空间 局部名称空间 在函数体内等 查询全局和局部 globals()方法可以 ...

  3. elastic-job详解(五):自定义任务参数

    在elastic-job详解(三):Job的手动触发功能一文中讲到了如何手动触发一个Job,但是我们手动触发的时候常常需要输入一些参数.举个栗子:我们有个日统计报表,每天凌晨统计一次,统计上一天的数据 ...

  4. 【高精度】高精度分数[c++]

    [高精度]高精度分数 时间限制: 1 Sec 内存限制: 64 MB 题目描述 "人无远虑,必有近忧"是修罗王一直以来恪守的信条,为了以防万一,他在很久以前就将<魔法宝典&g ...

  5. a^b%p and a*b%p快速幂

    #include<cstdio> int power(int a, int b, int p) { %p; ) { ) ans=(long long)ans*a%p; a=(long lo ...

  6. delphi 设置多屏幕

    //poScreenCenter时,窗体会显示到主显示器的中央 MainForm.Position := poScreenCenter; function TGAEAMainForm.GetWorkA ...

  7. Cenos7 部署asp.net core站点

    系统版本 rpm -q centos-release --- centos-release--5.1804.el7.centos.x86_64 安装libicu yum install libunwi ...

  8. Unity项目中文字的统一管理

    一款游戏在研发初期就需要考虑多语言的问题,否则后期在进行多国语言版本时就面临着巨大的成本.鉴于之前页游的经验,其它同事设计出读取Excel的方式来管理所有的文字.但是我在使用中发现很致使的一个问题,当 ...

  9. HEVC与VP9之间的对比

    在streamingmedia上看到的一篇对比HEVC与VP9的文章,挺不错.另外这边文章的几个comment也是不错的. 下面是全文.   The Great UHD Codec Debate: G ...

  10. WPF中,输入完密码回车提交 ,回车触发按钮点击事件

    类似与winform中窗体的AcceptButton属性,在wpf中,需要将按钮的IsDefault设置为true就行.