相信好多朋友为开源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 我们已经完成所有步骤。如需交流 请可加QQ 1297229577
文章出自：http://www.cnblogs.com/libaoting/p/ckplayer.html 可自由引用，但请注明来源，谢谢。
时间： 2024-08-10 17:17:45