本文介绍如何在KindEditor富文本编辑器中扩展视频插件，包括新增video标签的处理方式、格式适配及源代码展示。通过修改media标签实现视频内容的嵌入，并调整相关js脚本来兼容不同视频格式。
修改思路 ：在已有的media标签扩展基础上继续扩展
关键修改
1 增加扩展插件plugins\video 目录结构跟media（可以复制media的整个目录），然后修改media.js为video.js，然后修改video.js里面相关的内容，具体细节参考开源项目 kindeditor-video
2 适配文件格式并添加video标签
在原来增加medie标签相关位置增加 video标签的判断，代码片段如下：
function _mediaType(src) {
if (/\.(rm|rmvb)(\?|$)/i.test(src)) {
return 'audio/x-pn-realaudio-plugin';
}
if (/\.(mp3)(\?|$)/i.test(src)) {
return 'audio/mpeg';
}
if (/\.(mp4)(\?|$)/i.test(src)) {
return '"video/mp4';
}
if (/\.(swf|flv)(\?|$)/i.test(src)) {
return 'application/x-shockwave-flash';
}
return 'video/x-ms-asf-plugin';
}
function _mediaClass(type) {
if (/realaudio/i.test(type)) {
return 'ke-rm';
}
if (/flash/i.test(type)) {
return 'ke-flash';
}
if (/audio|mp4/i.test(type)) {
return 'ke-video';
}
return 'ke-media';
}
function _mediaAttrs(srcTag) {
return _getAttrList(unescape(srcTag));
}
function _videoEmbed(attrs) {
var html = '<video controls="controls" ';
_each(attrs, function(key, val) {
html += key + '="' + val + '" ';
});
html += '/>';
return html;
}
function _mediaEmbed(attrs) {
var html = '<embed ';
_each(attrs, function(key, val) {
html += key + '="' + val + '" ';
});
html += '/>';
return html;
}
function _mediaImg(blankPath, attrs) {
var width = attrs.width,
height = attrs.height,
type = attrs.type || _mediaType(attrs.src),
style = '';
if(type=="audio/mpeg" || type=="video/mp4"){
srcTag = _videoEmbed(attrs);
}else{
srcTag = _mediaEmbed(attrs);
}
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;
}
3 查看源代码的地方增加查看video标签的功能，代码片段如下：
查看源码事件
self.beforeGetHtml(function(html) {
if (_IE && _V <= 8) {
html = html.replace(/<div\s+[^>]*data-ke-input-tag="([^"]*)"[^>]*>([\s\S]*?)<\/div>/ig, function(full, tag) {
return unescape(tag);
});
html = html.replace(/(<input)((?:\s+[^>]*)?>)/ig, function($0, $1, $2) {
if (!/\s+type="[^"]+"/i.test($0)) {
return $1 + ' type="text"' + $2;
}
return $0;
});
}
return html.replace(/(<(?:noscript|noscript\s[^>]*)>)([\s\S]*?)(<\/noscript>)/ig, function($0, $1, $2, $3) {
return $1 + _unescape($2).replace(/\s+/g, ' ') + $3;
})
.replace(/<img[^>]*class="?ke-(flash|rm|media)"?[^>]*>/ig, function(full) {
var imgAttrs = _getAttrList(full);
var styles = _getCssList(imgAttrs.style || '');
var attrs = _mediaAttrs(imgAttrs['data-ke-tag']);
var width = _undef(styles.width, '');
var height = _undef(styles.height, '');
if (/px/i.test(width)) {
width = _removeUnit(width);
}
if (/px/i.test(height)) {
height = _removeUnit(height);
}
attrs.width = _undef(imgAttrs.width, width);
attrs.height = _undef(imgAttrs.height, height);
return _mediaEmbed(attrs);
})
.replace(/<img[^>]*class="?ke-video"?[^>]*>/ig, function(full) {
var imgAttrs = _getAttrList(full);
var styles = _getCssList(imgAttrs.style || '');
var attrs = _mediaAttrs(imgAttrs['data-ke-tag']);
var width = _undef(styles.width, '');
var height = _undef(styles.height, '');
if (/px/i.test(width)) {
width = _removeUnit(width);
}
if (/px/i.test(height)) {
height = _removeUnit(height);
}
attrs.width = _undef(imgAttrs.width, width);
attrs.height = _undef(imgAttrs.height, height);
return _videoEmbed(attrs);
})
.replace(/<img[^>]*class="?ke-anchor"?[^>]*>/ig, function(full) {
var imgAttrs = _getAttrList(full);
return '<a name="' + unescape(imgAttrs['data-ke-name']) + '"></a>';
})
.replace(/<div\s+[^>]*data-ke-script-attr="([^"]*)"[^>]*>([\s\S]*?)<\/div>/ig, function(full, attr, code) {
return '<script' + unescape(attr) + '>' + unescape(code) + '</script>';
})
.replace(/<div\s+[^>]*data-ke-noscript-attr="([^"]*)"[^>]*>([\s\S]*?)<\/div>/ig, function(full, attr, code) {
return '<noscript' + unescape(attr) + '>' + unescape(code) + '</noscript>';
})
.replace(/(<[^>]*)data-ke-src="([^"]*)"([^>]*>)/ig, function(full, start, src, end) {
full = full.replace(/(\s+(?:href|src)=")[^"]*(")/i, function($0, $1, $2) {
return $1 + _unescape(src) + $2;
});
full = full.replace(/\s+data-ke-src="[^"]*"/i, '');
return full;
})
.replace(/(<[^>]+\s)data-ke-(on\w+="[^"]*"[^>]*>)/ig, function(full, start, end) {
return start + end;
});
});源码到html代码的切换事件：
self.beforeSetHtml(function(html) {
if (_IE && _V <= 8) {
html = html.replace(/<input[^>]*>|<(select|button)[^>]*>[\s\S]*?<\/\1>/ig, function(full) {
var attrs = _getAttrList(full);
var styles = _getCssList(attrs.style || '');
if (styles.display == 'none') {
return '<div class="ke-display-none" data-ke-input-tag="' + escape(full) + '"></div>';
}
return full;
});
}
return html.replace(/<embed[^>]*type="([^"]+)"[^>]*>(?:<\/embed>)?/ig, function(full) {
var attrs = _getAttrList(full);
attrs.src = _undef(attrs.src, '');
attrs.width = _undef(attrs.width, 0);
attrs.height = _undef(attrs.height, 0);
return _mediaImg(self.themesPath + 'common/blank.gif', attrs);
})
.replace(/<video[^>]*[^>]*>(?:<\/video>)?/ig, function(full) {
var attrs = _getAttrList(full);
attrs.src = _undef(attrs.src, '');
attrs.width = _undef(attrs.width, 0);
attrs.height = _undef(attrs.height, 0);
return _mediaImg(self.themesPath + 'common/blank.gif', attrs);
})
.replace(/<a[^>]*name="([^"]+)"[^>]*>(?:<\/a>)?/ig, function(full) {
var attrs = _getAttrList(full);
if (attrs.href !== undefined) {
return full;
}
return '<img class="ke-anchor" src="' + self.themesPath + 'common/anchor.gif" data-ke-name="' + escape(attrs.name) + '" />';
})
.replace(/<script([^>]*)>([\s\S]*?)<\/script>/ig, function(full, attr, code) {
return '<div class="ke-script" data-ke-script-attr="' + escape(attr) + '">' + escape(code) + '</div>';
})
.replace(/<noscript([^>]*)>([\s\S]*?)<\/noscript>/ig, function(full, attr, code) {
return '<div class="ke-noscript" data-ke-noscript-attr="' + escape(attr) + '">' + escape(code) + '</div>';
})
.replace(/(<[^>]*)(href|src)="([^"]*)"([^>]*>)/ig, function(full, start, key, src, end) {
if (full.match(/\sdata-ke-src="[^"]*"/i)) {
return full;
}
full = start + key + '="' + src + '"' + ' data-ke-src="' + _escape(src) + '"' + end;
return full;
})
.replace(/(<[^>]+\s)(on\w+="[^"]*"[^>]*>)/ig, function(full, start, end) {
return start + 'data-ke-' + end;
})
.replace(/<table[^>]*\s+border="0"[^>]*>/ig, function(full) {
if (full.indexOf('ke-zeroborder') >= 0) {
return full;
}
return _addClassToTag(full, 'ke-zeroborder');
});
});
4 然后就是添加video标签的相关css样式（样式文件位置：themes\default\default.css）
.ke-icon-video {
background:url("../common/video_16.png") no-repeat;
width: 16px;
height: 16px;
}
完整的代码请查看开源项目 kindeditor-video
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
