初始的時候,video這個標籤kindeditor是不識別的,只要html處理或者全屏的時候,都會被排除掉。若是想要video存在,則須要設置屬性filterMode :falsejavascript
若是隻是想要某個標籤或者屬性不被過濾,則須要在下面圖1中,htmlTags中進行添加html
由於想要在web編輯的時候,就可以展現視頻,因此乾脆將kindeditor中html的添加的方法進行了一些修改,至於百度上其餘人說的加什麼插件之類的,感受有點煩,並且因爲網站須要手機端顯示,因此就直接把kindeditor.js改動了。java
紅色部分代碼爲新增代碼(具體圖2),只處理mp4狀況,具體需求具體修改。這裏只處理mp4格式了。若是是mp4格式的文件,則添加的html內容直接使用video標籤插入了。web
function _mediaImg(blankPath, attrs) {
...
//sldedit 20171129 將mp4格式直接使用video放置html,不過想使用mp4,須要將 filterMode :false,//不開啓過濾
if (attrs.src.indexOf(".mp4")!=-1) {
var html = '<video controls="" width="100%" class="' + _mediaClass(type) + '" ';
html += '><source src="' + attrs.src + '" data-ke-src="'+attrs.src+'" >'
html += '</video>';
return html;
}
else {
var html = '<img class="' + _mediaClass(type) + '" src="' + blankPath + '" ';
if (style !== '') {
html += 'style="' + style + '" ';
}
html += 'data-ke-tag="' + escape(srcTag) + '" alt="" />';
return html;
}
}
<!--Kindeditor以及相應的操做-->
<script src="/assets/global/plugins/kindeditor/kindeditor.js" type="text/javascript"></script>
<script src="/assets/global/plugins/kindeditor/lang/zh_CN.js" type="text/javascript"></script>
<script type="text/javascript">
var introEditor;
KindEditor.ready(function (K) {
introEditor = K.create('[name=introduction_show]', {
minWidth: 400,
allowFileManager: true,
filterMode :false,//不開啓過濾,所有不開啓過濾使用false設置,若是是想要某個不過濾,則須要進入kindeditor.js進行修改
uploadJson: 'xxx',
afterBlur: function () {
this.sync();
$('#showrichtext').html($("[name=introduction_show]").val());
}
});
});
</script>
圖1ide
圖2網站