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(/&quot;/g,"'").replace(/embed/g,"video controls");

当然这个方法指标不治本,等回头有空了,再研究一下,直接在控件里生成video的办法。

最后补一个,HTML富文本存数据库和展示的问题。

在网上看了好多各种转义。我的办法是这样的

1、整体不转义传到后台后。把引号替换成对应的形式。然后直接存入数据库

    public static final String filterHtml(String str){
str=str.replaceAll("\"", "&quot;");
//str=str.replaceAll("\\&", "&amp;").replaceAll("<", "&lt;").replaceAll("\"", "&quot;").replaceAll(">", "&gt;").replace("'", "&apos;");
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(/&quot;/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解决上传视频不能在手机端显示的问题的更多相关文章

  1. javaweb中上传视频,并且播放,用上传视频信息为例

    1.上传视频信息的jsp页面uploadVideo.jsp <body background="image/bk_hero.jpg"><div id=" ...

  2. ppt转flash kindeditor上传视频全屏问题

    最近要增加页面的ppt显示功能,于是考虑把ppt转成flash,在网上搜到了ispingfree,链接: https://pan.baidu.com/s/1QZzx6qmdsnwzWCuULXzUOw ...

  3. 百度编辑器上传视频以及视频编辑器预览bug解决

    百度编辑器目前来讲是运用比较广泛的一个编辑器了,不仅开源还有中文的文档,所以很受欢迎,不过里面也有许多地方需要开发人员自己调试,其中一个比较常见的问题就是上传视频了,上传视频本身有一些小bug,这个基 ...

  4. 【转载】解决KindEditor图片上传对话框位置异常问题(浏览器放大缩小时对话框不见了)

    今早在整理文件上传模块的时候,发现富文本编辑器 kindeditor 上传图片的对话框无法显示,其实对话框已经生成了,但是它没有top值,所以在页面上看不见. 捣鼓了一个多小时,代码看了一大串,没解决 ...

  5. 转:解决Onethink上传视频的问题 超棒的解决方案

    用过Onethink的都知道,它是不能上传视频的. 有人想到用上传附件的方式上传视频,但是结果……就是提示没有上传文件. 要是正常上传个一两兆的图片啊,压缩文件什么的还是可以的. 所以,重点来了 怎么 ...

  6. 动态获取爱奇艺上传视频mp4格式url地址

    有时候,在工作中有些客户需要用到视频,我们大家都知道视频是非常的耗费流量的,因此,如果因为项目要求客户单独买台视频服务器是非常划不来的.那么将视频上传到优酷,爱奇艺等视频网站来托管那是一件很好的解决方 ...

  7. CKEditor上传视频(java)

    CKEditor上传视频 CKEditor批量上传图片flvplayer.swf播放器CKEditor整合包(v4.6.1) ------------------------------------ ...

  8. DedeCMS上传视频

    DedeCMS建站方便快捷,但是在上传视频时会出现问题,主要是文件格式与大小限制,需要修改配置文件,修改的地方主要有: 1.修改 DedeCMS系统配置参数--附件设置--允许的多媒体软件类型(以MP ...

  9. 在Windows Server 2008 R2 Server中,上传视频遇到的问题(二)

    上一篇  在Windows Server 2008 R2 Server中,上传视频遇到的问题(一)中遇到上传40M视频报404,然后修改配置文件节点: <httpRuntime targetFr ...

随机推荐

  1. 10 python os&sys 模块

    1.os模块 os模块提供了很多允许你的程序与操作系统直接交互的功能 os模块的主要功能:处理文件和目录,系统相关,执行命令,管理进程 检验给出的路径是否是一个文件:os.path.isfile() ...

  2. Others-接口集成方式

    1. 异步通信方式可分为不互锁.半互锁和全互锁三种类型: a.不互锁方式 主模块发出请求信号后,不等待接到从模块的回答信号,而是经过一段时间.确认从模块已收到请求信号后,便撤消其请求信号:从设备接到请 ...

  3. 如何在idea中导入本地所需要的jar包

    今天遇到一个问题,在idea创建普通java工程时不知道如何导入jar包,上网差了一下,也算是一个整理.

  4. Python 中的垃圾回收机制(转载)

    from: https://foofish.net/python-gc.html GC作为现代编程语言的自动内存管理机制,专注于两件事:1. 找到内存中无用的垃圾资源 2. 清除这些垃圾并把内存让出来 ...

  5. C++ 11 中的 Lambda 表达式的使用

    Lambda在C#中使用得非常频繁,并且可以使代码变得简洁,优雅. 在C++11 中也加入了 Lambda. 它是这个样子的 [] () {}...  是的三种括号开会的节奏~ [] 的作用是表示La ...

  6. frame标签使用

    今天在做onebyone作业的时候,为了使自己的页面更加美观,我便使用了frame框架,百度了他的用法,总结如下 frame,是网页开发必须掌握的知识.例如后台架构.局部刷新,页面分割,都是frame ...

  7. bash: ifconfig: command not found 问题解决

    ifconfig使用出现问题了?竟然提示找不到~~于是百度~~ [flymouse@localhost /]$ ifconfig 提示:“bash: ifconfig: command not fou ...

  8. 疯狂JAVA——第二章 理解面向对象

    面向对象的三大特征:继承.封装和多态 面向对象的方式实际上由OOA(面向对象分析).OOD(面向对象设计)和OOP(面相对象编程)三个部分组成,其中OOA和OOD的结构需要用一个描述方式来描述并记录, ...

  9. Ansible 从远程主机添加或删除MySQL数据库

    mysql_db - 从远程主机添加或删除MySQL数据库. 概要 要求(在执行模块的主机上) 选项 例子 笔记 状态 支持 概要 从远程主机添加或删除MySQL数据库. 要求(在执行模块的主机上) ...

  10. 跨域请求设置withCredentials

    最近在做运动城项目,这一个项目下面有多个子项目,如主数据项目,pos项目等.主数据项目的域名为www.topmall.com,POS项目的域名为pos.topmall.com.即两个项目的主域名相同, ...