kindeditor编辑器添加H5video标签
最近有需求，要添加上传h5视频功能，因为chrome和移动端不支持播放flash视频
在网上找了相关信息，许多都是乱码的。所以我整理了，重新再发一份相关的吧。
开始
在 kindeditor\plugins 目录下新建目录 htmlfvideo ,新建 htmlfvideo.js
** htmlfvideo.js **
KindEditor.plugin('htmlfvideo', function (K) {
var self = this,
name = 'htmlfvideo',
lang = self.lang(name + '.'),
allowHtml5VideoUpload = K.undef(self.allowHtml5VideoUpload, true),
allowFileManager = K.undef(self.allowFileManager, false),
formatUploadUrl = K.undef(self.formatUploadUrl, true),
extraParams = K.undef(self.extraFileUploadParams, {}),
filePostName = K.undef(self.filePostName, 'imgFile'),
uploadJson = K.undef(self.uploadJson, self.basePath + 'php/upload_json.php ');
self.plugin.htmlfvideo = {
edit: function () {
var html = [
''
].join('');
var dialog = self.createDialog({
name: name,
width: 450,
height: 230,
title: self.lang(name),
body: html,
yesBtn: {
name: self.lang('yes'),
click: function (e) {
var url = K.trim(urlBox.val()),
width = widthBox.val(),
height = heightBox.val();
if (url == 'http://' || K.invalidUrl(url)) {
alert(self.lang('invalidUrl'));
urlBox[0].focus();
return;
}
if (!/^\d*$/.test(width)) {
alert(self.lang('invalidWidth'));
widthBox[0].focus();
return;
}
if (!/^\d*$/.test(height)) {
alert(self.lang('invalidHeight'));
heightBox[0].focus();
return;
}
var html = K.mediaImg(self.themesPath + 'common/blank.gif', {
src: url,
controls: 'controls', //type : K.mediaType(url),
width: width,
height: height,
autoplay: autostartBox[0].checked ? 'true' : 'false',
loop: 'true'
});
self.insertHtml(html).hideDialog().focus();
}
}
}),
div = dialog.div,
urlBox = K('[name="url"]', div),
viewServerBtn = K('[name="viewServer"]', div),
widthBox = K('[name="width"]', div),
heightBox = K('[name="height"]', div),
autostartBox = K('[name="autoplay"]', div);
urlBox.val('http://');
if (allowHtml5VideoUpload) {
var uploadbutton = K.uploadbutton({
button: K('.ke-upload-button', div)[0],
fieldName: filePostName,
extraParams: extraParams,
url: K.addParam(uploadJson, 'dir=htmlfvideo'), //上传路径
afterUpload: function (data) {
dialog.hideLoading();
if (data.error === 0) {
var url = data.url;
if (formatUploadUrl) {
url = K.formatUrl(url, 'absolute');
}
urlBox.val(url);
if (self.afterUpload) {
self.afterUpload.call(self, url, data, name);
}
alert(self.lang('uploadSuccess'));
} else {
alert(data.message);
}
},
afterError: function (html) {
dialog.hideLoading();
self.errorDialog(html);
}
});
uploadbutton.fileBox.change(function (e) {
dialog.showLoading(self.lang('uploadLoading'));
uploadbutton.submit();
});
} else {
K('.ke-upload-button', div).hide();
}
if (allowFileManager) {
viewServerBtn.click(function (e) {
self.loadPlugin('filemanager', function () {
self.plugin.filemanagerDialog({
viewType: 'LIST',
dirName: 'htmlfvideo',
clickFn: function (url, title) {
if (self.dialogs.length > 1) {
K('[name="url"]', div).val(url);
if (self.afterSelectFile) {
self.afterSelectFile.call(self, url);
}
self.hideDialog();
}
}
});
});
});
} else {
viewServerBtn.hide();
}
var img = self.plugin.getSelectedhtmlfvideo();
if (img) {
var attrs = K.mediaAttrs(img.attr('data-ke-tag'));
urlBox.val(attrs.src);
widthBox.val(K.removeUnit(img.css('width')) || attrs.width || 0);
heightBox.val(K.removeUnit(img.css('height')) || attrs.height || 0);
autostartBox[0].checked = (attrs.autoplay === 'true');
}
urlBox[0].focus();
urlBox[0].select();
},
'delete': function () {
self.plugin.getSelectedhtmlfvideo().remove(); // [IE] 删除图片后立即点击图片按钮出错
self.addBookmark();
}
};
self.clickToolbar(name, self.plugin.htmlfvideo.edit);
});
kindeditor\themes\default 目录下修改 default.css ，目的是显示播放器的图标，图片在 default.png 里面，有需要可以新增
在 .ke-icon-media 下添加样式
.ke-icon-htmlfvideo{
background-position:0px -528px;
width:16px;
height:16px;
}
kindeditor\lang\zh_CN.js, 加上相关弹窗信息。
htmlfvideo : 'html5视频',
'htmlfvideo.url' : 'URL',
'htmlfvideo.width' : '宽度',
'htmlfvideo.height' : '高度',
'htmlfvideo.upload' : '上传',
'htmlfvideo.viewServer' : '文件空间',
'htmlfvideo.autostart' : '自动播放',
kindeditor\php\upload_json.php $ext_arr 变量修改
$ext_arr = array(
'image' => array('gif', 'jpg', 'jpeg', 'png', 'bmp'),
'flash' => array('swf', 'flv'),
'htmlfvideo' => array('mp4','mpg4','ogg', 'WebM'),
'media' => array('swf', 'flv', 'mp3', 'mp4', 'wav', 'wma', 'wmv', 'mid', 'avi', 'mpg', 'asf', 'rm', 'rmvb'),
'file' => array('doc', 'docx', 'xls', 'xlsx', 'ppt', 'htm', 'html', 'txt', 'zip', 'rar', 'gz', 'bz2'),
);
kindeditor.js修改
找到 var _INLINE_TAG_MAP = _toMap('a 开头的，修改为
var _INLINE_TAG_MAP = _toMap('a,abbr,acronym,b,basefont,bdo,big,br,button,cite,code,del,dfn,em,font,i,img,input,ins,kbd,label,map,q,s,samp,select,small,span,strike,strong,sub,sup,textarea,tt,u,var,video'),
_BLOCK_TAG_MAP = _toMap('address,applet,blockquote,body,center,dd,dir,div,dl,dt,fieldset,form,frameset,h1,h2,h3,h4,h5,h6,head,hr,html,iframe,ins,isindex,li,map,menu,meta,noframes,noscript,object,ol,p,pre,script,style,table,tbody,td,tfoot,th,thead,title,tr,ul,video'),
_SINGLE_TAG_MAP = _toMap('area,base,basefont,br,col,frame,hr,img,input,isindex,link,meta,param,embed'),
_STYLE_TAG_MAP = _toMap('b,basefont,big,del,em,font,i,s,small,span,strike,strong,sub,sup,u'),
_CONTROL_TAG_MAP = _toMap('img,table,input,textarea,button,video'),
_PRE_TAG_MAP = _toMap('pre,style,script'),
_NOSPLIT_TAG_MAP = _toMap('html,head,body,td,tr,table,ol,ul,li'),
_AUTOCLOSE_TAG_MAP = _toMap('colgroup,dd,dt,li,options,p,td,tfoot,th,thead,tr'),
_FILL_ATTR_MAP = _toMap('checked,compact,declare,defer,disabled,ismap,multiple,nohref,noresize,noshade,nowrap,readonly,selected'),
_VALUE_TAG_MAP = _toMap('input,button,textarea,select');
根据教程主要还是在 _INLINE_TAG_MAP , _BLOCK_TAG_MAP, _CONTROL_TAG_MAP里面添加video即可
找到 items : 数组，添加 video
items : [
'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|','image', 'multiimage',
'flash', 'media', 'htmlfvideo', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
'anchor', 'link', 'unlink', '|', 'about'
],
在 items 下方找到 htmlTags : 数组， 同样添加
video: ['src', 'width', 'height', 'loop', 'autoplay', 'controls'],
找到 _mediaType 函数， 添加条件，
function _mediaType(src) {
if (/\.(rm|rmvb)(\?|$)/i.test(src)) {
return 'audio/x-pn-realaudio-plugin';
}
if (/\.(swf|flv)(\?|$)/i.test(src)) {
return 'application/x-shockwave-flash';
}
if(/\.(mp4|ogg|mpg4)(\?|$)/i.test(src)){
return "htmlfvideo";
}
return 'video/x-ms-asf-plugin';
}
在下方新增函数 _htmlfvideo
function _htmlfvideo(attrs){
var html = '同样 _mediaImg 函数同样新增判断条件
function _mediaImg(blankPath, attrs) {
var width = attrs.width,
height = attrs.height,
type = attrs.type || _mediaType(attrs.src),
srcTag = _mediaEmbed(attrs),
style = '';
if(type == "htmlfvideo"){
srcTag = _htmlfvideo(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 = '
';
return html;
}
找到 K.mediaEmbed = _mediaEmbed;, 添加K.htmlfvideo = _htmlfvideo;方法。
找到 img.ke-flash , 下方新增
'img.ke-htmlfvideo {',
' border:1px solid #AAA;',
' background-image:url(' + themesPath + 'common/media.gif);',
' background-position:center center;',
' background-repeat:no-repeat;',
' width:100px;',
' height:100px;',
'}',
找到 self.plugin.getSelectedLink , 下方新增
self.plugin.getSelectedhtmlfvideo = function() {
return _getImageFromRange(self.edit.cmd.range, function(img) {
return img[0].className == 'ke-htmlfvideo'|| img[0].className == 'ke-rm'; });
};
下方 _each('link,image,flash,media,anchor')' 方法添加 htmlfvideo,即
_each('link,image,flash,media,anchor,htmlfvideo')
找到 .replace(/,
新增修改为
.replace(/]*class="?ke-(flash|htmlfvideo|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);
if (imgAttrs.class == "ke-htmlfvideo") {
return _htmlfvideo(attrs);
} else {
return _mediaEmbed(attrs);
}
})
.replace(/]*src="([^"]+)"[^>]*>(?:<\/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);
})
demo链接
github链接