在KindEditor中編輯可上傳MP4

mp4視訊格式上傳：

找到 kindeditor-all.js

1. 在 htmlTags 配置中新增:

video : [‘id’, ‘class’, ‘src’, ‘width’, ‘height’, ‘type’, ‘loop’, ‘autostart’, ‘quality’, ‘.width’,
‘.height’, ‘align’, ‘allowscriptaccess’,‘controls’],
這是配置白名單, 為了防止kindeditor編輯器無法識別video標籤.

2. 修改 _mediaImg()方法

原始碼

function _mediaImg(blankPath, attrs) {
var width = attrs.width,
height = attrs.height,
type = attrs.type || _mediaType(attrs.src),
srcTag = _mediaEmbed(attrs),
style = ‘’;
if (/\D/.test(width)) {
style += ‘width:’ + width + ‘;’;
} else if (width > 0) {
style += ‘width:’ + width + ‘px;’;
}
if (/\D/.test(height)) {
style += ‘height:’ + height + ‘;’;
} else if (height > 0) {
style += ‘height:’ + height + ‘px;’;
}

var html = ‘<img class="’ + _mediaClass(type) + ‘" src="’ + blankPath + '" ';
if (style !== ‘’) {
html += ‘style="’ + style + '" ';
}
html += ‘data-ke-tag="’ + escape(srcTag) + ‘" alt="" />’;

return html;
}

修改為，程式碼塊部分為修改的程式碼

function _mediaImg(blankPath, attrs) {
var width = attrs.width,
height = attrs.height,
type = attrs.type || _mediaType(attrs.src),
srcTag = _mediaEmbed(attrs),
style = ‘’;
if (/\D/.test(width)) {
style += ‘width:’ + width + ‘;’;
} else if (width > 0) {
style += ‘width:’ + width + ‘px;’;
}
if (/\D/.test(height)) {
style += ‘height:’ + height + ‘;’;
} else if (height > 0) {
style += ‘height:’ + height + ‘px;’;
}

if (attrs.src.indexOf(".mp4")!=-1) {
    var html = '<video src="'+attrs.src+'" controls="controls" width="'+width+'" height="'+height+'" class="' +          _mediaClass(type) + '" type="video/mp4" ';

  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;

}
attrs.src.indexOf(".mp4")!=-1 如果是mp4格式視訊，就將標籤替換成標籤，這樣才能播放

如果修改到這裡的話, 會出現編輯器無法編輯, 上傳後的視訊無法刪除.

這裡拼接video視訊地址的時候, 要加入編輯器識別標籤

:

var html = '<p></p><p><video src="'+attrs.src+'" controls="controls" width="'+width+'" height="'+height+'" class="' + _mediaClass(type) + '" type="video/mp4" ';
html += '>您的瀏覽器太老了, 不支援視訊播放。請下載最新瀏覽器!</video></p><p></p>'