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(/&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;
}

原文地址:https://www.cnblogs.com/minzhousblogs/p/9705782.html

时间: 2024-10-08 17:35:04

KindEditor解决上传视频不能在手机端显示的问题的相关文章

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

百度编辑器目前来讲是运用比较广泛的一个编辑器了,不仅开源还有中文的文档,所以很受欢迎,不过里面也有许多地方需要开发人员自己调试,其中一个比较常见的问题就是上传视频了,上传视频本身有一些小bug,这个基本最大的体现就是编辑器内无法预览上传的视频问题. 我搜集了网上的解决方案,发现基本都一样,大多数都是复制黏贴的答案,虽说一定程度解决了编辑器上传不显示的问题,但却造成了新的bug,例如上传视频框无法关闭,还有只要等切换源码模式再返回来又看不到预览的视频了等. 所以最后还是自己动手丰衣足食,最后终于找

关于上传视频到七牛的一些解决方案

<div class="form-group"> <label>上传视频:</label> <div class="my-upload"> <div class=""> <input type="file" id="fileupload" name="fileupload" class="" />

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

上一篇  在Windows Server 2008 R2 Server中,上传视频遇到的问题(一)中遇到上传40M视频报404,然后修改配置文件节点: <httpRuntime targetFramework="4.5.2" maxRequestLength="1073741824" executionTimeout="3600"/> 和 <security> <requestFiltering> <!-

h5上传视频到服务端,存到指定位置,url保存到数据库,最后以特定格式显示

一.视频上传到服务器,存到指定位置. 试过n个方法中,最最靠谱的一个: http://www.cnblogs.com/xdp-gacl/p/4200090.html 二.url保存到数据库 1.项目中新建一个jdbc包 新建类 package jdbc; import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import java.sql.ResultSet; i

陈松松:上传视频高手如何选择对自己最有价值的视频平台

这是我写的第89篇原创视频营销文章 陈松松,6年视频营销实战经验 最近很多朋友都问我,说:你主要把视频上传到哪些视频平台,你是如何选择这些平台的? 今天给大家详细讲一讲,我是怎么选择上传视频平台的,我会把视频平台分成各个不同的类型,根据每一次上传视频的目的来选择,上传的顺序也完全不同,这个看个人. 不管是下面哪一种,这样的平台都是非常有价值的,都应该优先发布. 而且每一个平台一般都具备几种优势,我建议能上传的尽量都上传,对我们来说只有好处,没有坏处. 对自己有价值的视频平台表现形式: 第一种:排

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

有时候,在工作中有些客户需要用到视频,我们大家都知道视频是非常的耗费流量的,因此,如果因为项目要求客户单独买台视频服务器是非常划不来的.那么将视频上传到优酷,爱奇艺等视频网站来托管那是一件很好的解决方案. 今天主要和大家聊下如果使用爱奇艺开放平台中来动态获取自己上传视频的mp4格式url地址.我们闲话少说,直接开始. 首先先看下通过这种方式获取的视频播放效果: 一.我们需要注册成为爱奇艺开发者       爱奇艺开放平台: http://open.iqiyi.com/index.html   二

kindeditor 文件上传在 spring mvc下的使用

最近做项目,需要用到文本编辑器,找了一下,决定使用 kindeditor,百度了一下kindeditor 文件上传的 controller的代码,copy下来发现了问题. 测试出来问题是:upload.parseRequest(request) 这一句取的值为空 ,再去百度一下,发现很多人都有这样的问题.主要原因就在于项目其他地方用到了spring mvc 配置好了的上传,配置文件里已经写了.所以 解决方案一是:删除 <bean id="multipartResolver" cl

视频营销:上传视频格外要注意的6个细节

这是我写的第93篇原创视频营销文章 陈松松,6年视频营销实战经验 今天分享下有关上传视频格外要注意的六个细节, 这六个细节大多数上传视频的朋友都没有注意, 在上传的过程中出现各种问题,接下来就详细跟你说说: 第1个细节:避免集中上传视频 如果每天只上传一两个视频,不会存在集中上传的问题, 但是如果你每天上传几十个到几百个视频,甚至更多,那必须注意这个细节, 尽量避免集中发布: 因为集中上传视频: ①所有视频会同时间推送出去,用户观看的时候,不知道先看哪个,也不能安心看完,这样上传的视频很难达到引

在Windows 2008 R2 Server中,上传视频遇到的问题

在Windows 2008 R2 Server中,上传视频不能播放,以及服务器大小限制问题,这里记录我的解决方法,以免再次遇到,无所适从. 1.上传视频不能播放 打开IIS,找到"MIME类型",如下: 双击"MIME类型",在右上角,点击"添加",如下: 点击确定,如下: 注:其他类型视频,一样如上添加. 2.上传大视频(这里45M),报404 在web.config文件的<system.web>节点中添加<httpRunti