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

?