kindeditor web文本编辑器加入video标签
2017-08-17 10:05
239 查看
修改思路 :在已有的media标签扩展基础上继续扩展
关键修改
1 增加扩展插件plugins\video 目录结构跟media(可以复制media的整个目录),然后修改media.js为video.js,然后修改video.js里面相关的内容,具体细节参考开源项目 kindeditor-video
2 适配文件格式并添加video标签
在原来增加medie标签相关位置增加 video标签的判断,代码片段如下:
3 查看源代码的地方增加查看video标签的功能,代码片段如下:
查看源码事件
源码到html代码的切换事件:
4 然后就是添加video标签的相关css样式(样式文件位置:themes\default\default.css)
完整的代码请查看开源项目 kindeditor-video
关键修改
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
相关文章推荐
- kindeditor web文本编辑器加入video标签(顺便修复一个bug)
- html5 video标签屏蔽右键视频另存为的js
- 关于EL标签中 no empty 疑惑加入判断一个list是否为空时 用 ${not empty list}个 ${... ne null} 有什么区别了 关于EL标签中 no empty 疑惑
- 为什么有些mp4不能在html5中video标签播放
- 浏览器支持播放的视频播放格式要求(H5的video标签)
- 让所有浏览器支持HTML5 video视频标签
- embed object以及video标签的区别以及使用
- 关于mete 标签 Iphone 中数字导致排位错乱 加入 telehone=no标签解决
- pad上 video标签 上面的 div元素所有事件无效
- video标签监听播放暂停,隐藏下载按钮
- HTML5 Audio/Video 标签,属性,方法,事件汇总:
- html5网页中用video标签无法播放MP4视频的解决方法
- HTML学习3——表单标签,select标签,textarea标签,datalist标签,video标签
- iOS 仿淘宝加入购物车前选择尺寸,规格弹窗的向内凹陷折叠动画效果和标签流布局
- 去掉文本编辑器中的标签
- 自定义HTML5 Video 标签
- 02-audio和video标签
- 在JS中a标签加入单击事件屏蔽href跳转页面
- 防止微信浏览器video标签全屏的问题
- [自用门户]jQuery 文档操作方法,了解prepend()用法:在标签开头加入由参数属性组成的内容