kindeditor集成ckplayer(带右键编辑菜单)
相信好多朋友为开源web编辑器没有集成视频播放器而烦恼，于是我就是试着修改了一下kindeditor，其实ueditor应该也是同样的，好了不多说了直接上图吧
kindeditor版本： 4.1.7 http://kindeditor.net/
ckplayer 版本：6.4 http://www.ckplayer.com/
1.在kindeditor\ckeditor\plugins下新建文件夹insertVideo
2.将ckplayer文件夹拷贝到kindeditor\ckeditor\plugins\insertVideo下
3.修改kindeditor\kindeditor.js （目的是增加getpath(url)方法）
在
K.mediaImg = _mediaImg; K.clearMsWord = _clearMsWord; K.tmpl = _tmpl;
下方新增一个可调用方法
K.getpath = _getpath;
在
K.formatUrl = _formatUrl; K.formatHtml = _formatHtml; K.getCssList = _getCssList; K.getAttrList = _getAttrList; K.mediaType = _mediaType; K.mediaAttrs = _mediaAttrs; K.mediaEmbed = _mediaEmbed; K.mediaImg = _mediaImg; K.clearMsWord = _clearMsWord; K.tmpl = _tmpl; K.getpath = _getpath;
上方添加
function _getpath:(z) { var d = unescape(window.location.href).replace('file:///', ''); var k = parseInt(document.location.port); var u = document.location.protocol + '//' + document.location.hostname; var l = '',e = '',t = ''; var s = 0; var r = z.split('//'); if (r.length > 0) { l = r[0] + '//' } var h = 'http|https|ftp|rtsp|mms|ftp|rtmp'; var a = h.split('|'); if(k!=80){ u+=':'+k; } for (i = 0; i < a.length; i++){ if ((a[i] + '://') == l){ s = 1; break; } } if (s == 0) { if (z.substr(0, 1) == '/'){ t = u + z; } else { e = d.substring(0, d.lastIndexOf('/') + 1).replace('\\', '/'); var w = z.replace('../', './'); var u = w.split('./'); var n = u.length; var r = w.replace('./', ''); var q = e.split('/'); var j = q.length - n; for (i = 0; i < j; i++) { t += q[i] + '/'; } t += r; } } else { t = z; } return t; }, Flash:function(){ var f=false,v=0; if(document.all){ try { var s=new ActiveXObject('ShockwaveFlash.ShockwaveFlash'); f=true; var z=s.GetVariable('$version'); v=parseInt(z.split(' ')[1].split(',')[0]); } catch(e){} } else{ if (navigator.plugins && navigator.plugins.length > 0){ var s=navigator.plugins['Shockwave Flash']; if (s){ f=true; var w = s.description.split(' '); for (var i = 0; i < w.length; ++i){ if (isNaN(parseInt(w[i]))) continue; v = parseInt(w[i]); } } } } return {f:f,v:v}; }
4.修改kindeditor\ckeditor\plugins\flash\flash.js为
KindEditor.plugin('flash', function(K) { var self = this, name = 'flash', lang = self.lang(name + '.'), allowFlashUpload = K.undef(self.allowFlashUpload, 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.flash = { edit : function() { var html = [ '<div style="padding:20px;">', //url '<div class="ke-dialog-row">', '<label for="keUrl" style="width:60px;">' + lang.url + '</label>', '<input class="ke-input-text" type="text" id="keUrl" name="url" value="" style="width:160px;" /> ', '<input type="button" class="ke-upload-button" value="' + lang.upload + '" /> ', '<span class="ke-button-common ke-button-outer">', '<input type="button" class="ke-button-common ke-button" name="viewServer" value="' + lang.viewServer + '" />', '</span>', '</div>', //width '<div class="ke-dialog-row">', '<label for="keWidth" style="width:60px;">' + lang.width + '</label>', '<input type="text" id="keWidth" class="ke-input-text ke-input-number" name="width" value="550" maxlength="4" /> ', '</div>', //height '<div class="ke-dialog-row">', '<label for="keHeight" style="width:60px;">' + lang.height + '</label>', '<input type="text" id="keHeight" class="ke-input-text ke-input-number" name="height" value="400" maxlength="4" /> ', '</div>', '</div>' ].join(''); var dialog = self.createDialog({ name : name, width : 450, 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', { name : 'ke-insertVideo', src : '/kindeditor/plugins/insertVideo/ckplayer/ckplayer.swf', url : url , width : width, height : height, align : 'middle', wmode : 'transparent', allowfullscreen : 'true', allowscriptaccess : 'always', quality : 'high' , flashvars : 'f='+url, loop : 'true', type : 'application/x-shockwave-flash' }); 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); urlBox.val('http://'); if (allowFlashUpload) { var uploadbutton = K.uploadbutton({ button : K('.ke-upload-button', div)[0], fieldName : filePostName, extraParams : extraParams, url : K.addParam(uploadJson, 'dir=media'), 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 : 'media', 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.getSelectedFlash(); if (img) { var attrs = K.mediaAttrs(img.attr('data-ke-tag')); urlBox.val(attrs.url); widthBox.val(K.removeUnit(img.css('width')) || attrs.width || 0); heightBox.val(K.removeUnit(img.css('height')) || attrs.height || 0); } urlBox[0].focus(); urlBox[0].select(); }, 'delete' : function() { self.plugin.getSelectedFlash().remove(); } }; self.clickToolbar(name, self.plugin.flash.edit); });
5.修改浏览js kindeditor\ckeditor\plugins\preview\preview.js为
KindEditor.plugin('preview', function(K) { var self = this, name = 'preview', undefined; self.clickToolbar(name, function() { var lang = self.lang(name + '.'), html = '<div style="padding:10px 20px;">' + '<iframe class="ke-textarea" frameborder="0" style="width:708px;height:400px;"></iframe>' + '</div>', dialog = self.createDialog({ name : name, width : 750, title : self.lang(name), body : html }), iframe = K('iframe', dialog.div), doc = K.iframeDoc(iframe); var _html = self.fullHtml(); _html.replace(/<embed[^>]*name="?ke-insertVideo"?[^>]*>/ig, function(tag) { var flashvars= K(tag).attr('flashvars'); var url= K(tag).attr('url'); url='f='+ K.getpath(url); _html = _html.replace(flashvars,url); return _html; }); doc.open(); doc.write(_html); doc.close(); K(doc.body).css('background-color', '#FFF'); iframe[0].contentWindow.focus(); }); });
kindeditor集成ckplayer已经完成。以上是http协议的视频加载方式。
若想改成rtmp协议形式，可留言说明，在此就不说明了
关于ckplayer的配置说明不是本章重点，因此暂不说明。可在ckplayer官网http://www.ckplayer.com/找到。
so 我们已经完成所有步骤。
文章出自：http://www.cnblogs.com/libaoting/p/ckplayer.html 可自由引用，但请注明来源，谢谢。
