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

Posted minzhousblogs

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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; }

 


以上是关于KindEditor解决上传视频不能在手机端显示的问题的主要内容,如果未能解决你的问题,请参考以下文章

kindeditor上传问题

Kindeditor编辑器问题:图片上传后返回路径不对?(ASP版)

KindEditor上传视频

kindeditor 手机端使用方法 使用kindeditor 4.1.7

PHP UEditor富文本编辑器 显示 后端配置项没有正常加载,上传插件不能正常使用

百度网盘怎么正确上传手机文件,本机传的时候显示为空文件