您的位置:首页 > 其它

kindeditor 增加加flv上传视频插件JW player

2013-02-06 12:39 369 查看
网上有利用原来的flash或media插件修改的方法,不过为了不影响原编辑器的使用或升级,还是采用新增一个flvplayer插件的办法

1、在plugin下建立文件夹flvplayer, 建立flvplaery.js文件 源码如下

/*******************************************************************************
* KindEditor - WYSIWYG HTML Editor for Internet
* Copyright (C) 2006-2011 kindsoft.net
*
* @author Roddy <luolonghao@gmail.com>
* @site http://www.kindsoft.net/ * @licence http://www.kindsoft.net/license.php *******************************************************************************/

KindEditor.plugin('flvplayer', function(K) {
var self = this, name = 'flvplayer', 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', {
//								src : url,
//								type : K.mediaType('.swf'),
//								width : width,
//								height : height,
//								quality : 'high'
//							});
var html='<script src="/flowplayer/flowplayer-3.2.11.min.js"></script>' + '<a href="'+url+'"       style="display:block;width:'+width+'px;height:'+height+'px;"       id="player">    </a>  <script language="JavaScript">      flowplayer("player", "/flowplayer/flowplayer-3.2.15.swf");    </script>';
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=flvplayer'),
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 : 'flvplayer',
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.src);
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);
});


  2、css文件中增加

.ke-icon-flvplayer {
background-position: 0px -512px;
width: 16px;
height: 16px;
}


  3、默认插件调用增加

kindeditor.js

items : 里面增加 'flvplayer'

4、关于上传和文件管理 的服务器脚本修改(以asp为例)

If instr(lcase("image,flash,media,file,flvplayer"), dirName) < 1 Then
showError("目录名不正确。"&dirName)
End If

Select Case dirName
Case "flash" extStr = flashExtStr
Case "media" extStr = mediaExtStr
Case "file" extStr = fileExtStr
Case "flvplayer" extStr = flashExtStr
Case Else  extStr = imageExtStr
End Select


相应的还要在flashExtStr 里面增加 播放器支持的格式 如 .flv .f4v .mp4等

file_manager_json.asp 里面对应增加 flvplayer 目录权限、格式等

综上,插件安装好后,以后如果换Flv网页播放器 只需对应换第1条里面的红色html部分代码即可
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐