更改kindeditor編輯器，改用支持h5的video標簽替換原有embed標簽

kindeditor是一款不錯的可視化編輯器，不過最近幾年似乎沒在更新，現在h5趨於主流，正好有個業務需要編輯器支持mp4視頻的播放，考慮到現在h5中的video標簽的強大，於是決定將原來系統中的embed標記更改好video。具體操作方法如下：

1、在296行

embed : ['id', 'class', 'src', 'width', 'height', 'type', 'loop', 'autostart', 'quality', '.width', '.height', 'align', 'allowscriptaccess'],

下面增加以下代碼：

video : ['id', 'class', 'src', 'width', 'height', 'type', 'loop', 'autostart', 'quality', '.width', '.height', 'align', 'allowscriptaccess','controls'],

修改后的效果如下圖：

2、在893-895行代碼段

if (/.(swf|flv)(?|$)/i.test(src)) {
	return 'application/x-shockwave-flash';
}

下面增加以下代碼：

if (/.(mp4|mp5)(?|$)/i.test(src)) {
	return 'video/mp4';
}

3、然后修改901-903行代碼

if (/flash/i.test(type)) {
	return 'ke-flash';
}

在下面增加

if (/video/i.test(type)) {
	return 'ke-video';
}

修改后的效果如下圖：

　　

4、在917行代碼function _mediaImg(blankPath, attrs) {

在其上面增加代碼：

function _mediaVideo(attrs) {
	var html = '<video  '
	_each(attrs, function(key, val) {
	html += key + '="' + val + '" ';
	});

	html += ' controls="controls" />';
	return html;
}

 

5、在955行代碼：K.mediaEmbed = _mediaEmbed;的下面

增加代碼 ：K.mediaVideo = _mediaVideo;

好了，這樣當我們上傳視頻時，就會使用video標記來引用視頻了。取代以前的embed標簽 。不過，這里還有一個問題，就是上傳視頻后，編輯器中為空白的（其實已經上傳成功，切換到代碼模式也能看到有內容）。使用chrome調試，發現問題在樣式上。經過對比發現問題在這里：
之前使用embed標簽顯示視頻的效果：

 

所以我們增加樣式即可，找到3528行的代碼：'img.ke-media {',
將其修改為'img.ke-media,img.ke-video {',
這句話的含義就是ke-video樣式與ke-media一樣。好了，文件修改好，清除瀏覽器緩存（也可以按ctr+f5)，再次上傳視頻查看效果解決！

 

 

 引用： http://www.totcms.com/html/201901-30/20190130094548.htm