KindEditor解决上传视频不能在手机端显示的问题
KindEditor自带的上传视频生成的HTML代码为<embed>,在手机端并不支持。于是可以自己在控件里增加生成video标签相关代码。
参考https://www.jianshu.com/p/047198ffed92。。
然而对着修改后没有成功,可能是那里没有改对吧。依然生成的是<embed>。当时由于时间赶,于是用了个简单的办法:
原控件不变的情况下
1、上传的地方修改视频格式。仅上传支持手机格式的
//定义允许上传的文件扩展名
HashMap<String, String> extMap = new HashMap<String, String>();
extMap.put("image", "gif,jpg,jpeg,png,bmp");
extMap.put("flash", "swf,flv");
extMap.put("media", "rmvb,mp4,mpg4,ogg,WebM");//原来支持下面多个格式,现在仅支持手机可以看的几个格式
//extMap.put("media", "swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb,mp4");
extMap.put("file", "doc,docx,xls,xlsx,ppt,htm,html,txt,zip,rar,gz,bz2");
extMap.put("htmlfvideo","swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb,mp4,ogg,WebM,mpg4");
2、在页面展示的地方,把展示的html富文本中embed直接替换成video。居然好使
var strR= str.replace(/"/g,"'").replace(/embed/g,"video controls");
当然这个方法指标不治本,等回头有空了,再研究一下,直接在控件里生成video的办法。
最后补一个,HTML富文本存数据库和展示的问题。
在网上看了好多各种转义。我的办法是这样的
1、整体不转义传到后台后。把引号替换成对应的形式。然后直接存入数据库
public static final String filterHtml(String str){
str=str.replaceAll("\"", """);
//str=str.replaceAll("\\&", "&").replaceAll("<", "<").replaceAll("\"", """).replaceAll(">", ">").replace("'", "'");
return str;
}
2、在数据库的数据形式为

3、展示页面的时候,把富文本数据中对应引号再转义回来
$(function() {
var pbArticle = replaceStr1('${pbArticle}');//文章
getInfoArticle(pbArticle);//初始化文章
});
function getInfoArticle(pbArticle){//初始化文章
if(pbArticle!=''){
var html = "";
var data = JSON.parse(pbArticle);
$("#title").html(data.title);
$("#pubTime").html(data.pubTime);
$("#content").html(data.content);
$("#articleId").val(data.id);
if("${isColection}"=="0"){//o是1否
$("#collectionId").attr("isColection","0");
$("#collectionId").attr("src","<%=request.getContextPath() %>/app/fonts/images/star_red.png");
}
}
}
//这里就是转义文章,视频和引号的问题
function replaceStr1(str){
debugger;
var strR= str.replace(/"/g,"'").replace(/embed/g,"video controls");
var strR1 = strR.replace(/\s+/g,"\ ");
var strR2 = strR1.replace(/\\/g,"\\\\");
console.info(strR2);
/* var json = eval(strR2); */
return strR2;
}
KindEditor解决上传视频不能在手机端显示的问题的更多相关文章
- javaweb中上传视频,并且播放,用上传视频信息为例
1.上传视频信息的jsp页面uploadVideo.jsp <body background="image/bk_hero.jpg"><div id=" ...
- ppt转flash kindeditor上传视频全屏问题
最近要增加页面的ppt显示功能,于是考虑把ppt转成flash,在网上搜到了ispingfree,链接: https://pan.baidu.com/s/1QZzx6qmdsnwzWCuULXzUOw ...
- 百度编辑器上传视频以及视频编辑器预览bug解决
百度编辑器目前来讲是运用比较广泛的一个编辑器了,不仅开源还有中文的文档,所以很受欢迎,不过里面也有许多地方需要开发人员自己调试,其中一个比较常见的问题就是上传视频了,上传视频本身有一些小bug,这个基 ...
- 【转载】解决KindEditor图片上传对话框位置异常问题(浏览器放大缩小时对话框不见了)
今早在整理文件上传模块的时候,发现富文本编辑器 kindeditor 上传图片的对话框无法显示,其实对话框已经生成了,但是它没有top值,所以在页面上看不见. 捣鼓了一个多小时,代码看了一大串,没解决 ...
- 转:解决Onethink上传视频的问题 超棒的解决方案
用过Onethink的都知道,它是不能上传视频的. 有人想到用上传附件的方式上传视频,但是结果……就是提示没有上传文件. 要是正常上传个一两兆的图片啊,压缩文件什么的还是可以的. 所以,重点来了 怎么 ...
- 动态获取爱奇艺上传视频mp4格式url地址
有时候,在工作中有些客户需要用到视频,我们大家都知道视频是非常的耗费流量的,因此,如果因为项目要求客户单独买台视频服务器是非常划不来的.那么将视频上传到优酷,爱奇艺等视频网站来托管那是一件很好的解决方 ...
- CKEditor上传视频(java)
CKEditor上传视频 CKEditor批量上传图片flvplayer.swf播放器CKEditor整合包(v4.6.1) ------------------------------------ ...
- DedeCMS上传视频
DedeCMS建站方便快捷,但是在上传视频时会出现问题,主要是文件格式与大小限制,需要修改配置文件,修改的地方主要有: 1.修改 DedeCMS系统配置参数--附件设置--允许的多媒体软件类型(以MP ...
- 在Windows Server 2008 R2 Server中,上传视频遇到的问题(二)
上一篇 在Windows Server 2008 R2 Server中,上传视频遇到的问题(一)中遇到上传40M视频报404,然后修改配置文件节点: <httpRuntime targetFr ...
随机推荐
- EOF与子过程返回
在2000及其以上系统,P处理语句GOTO新增了:EOF系统标签,意思是移动到当前P处理文件的结尾,EOF==END OF FILE的缩写,意为文件结尾,主要表现形式为:GOTO :EOFOR ...
- vue - process.env 定义
1.官方解释:process 对象是一个 global (全局变量),提供有关信息,控制当前 Node.js 进程.作为一个对象,它对于 Node.js 应用程序始终是可用的,故无需使用 requir ...
- oracle vm中的xp添加共享文件夹
接着就可以在虚拟的电脑系统里面打开我们的共享文件夹,在桌面找到”网络邻居“,双击打开 我们需要通过”添加一个网络邻居“来加载我们刚才添加的”共享文件夹“,根据向导一步步执行 然后点击”浏览 ...
- JS中回调函数的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- SpringDataJPA模糊查询遇到的坑
遇到的情况:在做短信渠道管理添加时,先要去校验数据库中是否有该产线-短信类型-渠道的记录,如果存在就不添加. //在库中是否存在该记录 private boolean ifExistChannelCo ...
- 解决:Invalid character found in method name. HTTP method names must be tokens
阿里云上弄了一个tomcat,经常半夜发送崩溃,查看日志发现这个东西,查阅资料发现是Tomcat的header缓冲区大小不够,只需要在server.xml中增加maxHttpHeaderSize字 ...
- maven tomcat7 远程热部署
在maven项目开发中,一般推荐使用jetty进行开发调试.但是在项目发布的时候要求使用tomcat7作为发布服务器,为此在maven中配置了tomcat7插件,以支持项目在外部tomcat7进行远程 ...
- Android自定义实现微信标题栏
Android自定义实现微信标题栏 前言:在android的开发中有时我们需要更个性化的标题栏,而不仅仅是系统预定义的图标加软件名,同时有时候我们需要在标题栏中实现更多功能,如添加按钮响应用户 ...
- poj2456(二分+贪心)
题目链接:http://poj.org/problem?id=2456 题意: 有n个呈线性排列的牲畜堋,给出其坐标,有c头牛,求把两头牛的最短距离的最大值. 思路: 先将坐标排个序.两头牛的最短距离 ...
- 神龟快跑,2016做的一款UWP游戏
神龟快跑,2016做的一款UWP游戏, 实际是H5页面, 用LAYA转AS3得到的 安装地址 https://www.microsoft.com/zh-cn/store/p/神龟快跑/9nblggh4 ...