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; }