FCKeditor插件开发实例(uploadify多文件上传插件)

发布时间:2019-08-09编辑:脚本学堂
FCKeditor插件开发实例(uploadify多文件上传插件)

FCKeditor的插件是对FCKeditor的扩展功能。
尽管一般条件下FCKeditor能适应使用,但你可能对FCKeditor仅有的功能不满意,FCKeditor提供了插件开放功能,好,我就来试试。
本人一直对于FCKeditor的文件上传功能很是不满,so,经过在网上多翻查找,找到一款多文件上传的小插件--uploadify。很棒的一个小东西。

我们先了解下FCKeditor插件的目录结构和一些命令。

插件的目录结构:插件目录的名称必须和插件的名称一样,而且目录里面必须包含一个fckplugin.js文件。lang目录用来实现界面的国际化的一些js文件,是可选的。每一个文件定义一种语言,文件名不包含.js,用FCKConfig.Plugins.Add()注册。如果实现的插件命令没有界面,也可以不需要支持任何语言。

实例目录结构:
fckeditor/editor/plugins/uploadify/fckplugin.js
fckeditor/editor/plugins/uploadify/lang/en.js
fckeditor/editor/plugins/uploadify/lang/zh-cn.js
fckeditor/editor/plugins/uploadify/inc/*.*   (uploadify相关的有文件)
fckeditor/editor/plugins/uploadify/index.html     (FCKeditor调用文件,用于上传界面)
fckeidtor/editor/plugins/uploadify/btn.png   (用于显示在FCKeditor主界面上工具栏中)
在fckplugin.js文件中定义你的插件,同时也应该注册改命令,以及创建一个工具栏按钮。

命令详解:

1.注册命令
FCKCommands.RegisterCommand(命令名称,对话框命令)

2.对话框命令
FCKDialogCommand(命令名称,对话框标题,URl,宽度,高度)

3.定义工具栏
FCKToolbarButton(命令名称,按钮标题)

4.添加一个图标
IconPath=图标地址

5.注册到工具栏
FCKToolbarItems.RegisterItem(命令名称,工具栏);
插件机制:注册命令-定义工具栏-注册到工具栏
我的fckplugin.js文件内容
//注册
FCKCommands.RegisterCommand(
'uploadify',
new FCKDialogCommand(
        'uploadify',
        FCKLang.uploadifyDlgTitle,
        FCKPlugins.Items['uploadify'].Path + "index.html",800,600
        )
);
//定义工具栏
var ouploadifyItem = new FCKToolbarButton('uploadify', FCKLang.uploadify);
ouploadifyItem.IconPath = FCKPlugins.Items['uploadify'].Path + 'btn.png';
//注册
FCKToolbarItems.RegisterItem('uploadify', ouploadifyItem);

Fckeditor插件的语言文件命名方式是:
国家或地区.js。如中国是zh.js.简体中文是zh-cn.js.英文是en.js等等。我们建立两个”en.js”和”zh-cn.js”。
然后编辑语言文件。
FCKeditor插件语言的命名方式为:FCKLang.变量名=”语言定义”
我们编辑”en.js”。

我的en.js文件内容
FCKLang.uploadifyBtn = 'Insert/upload files';
FCKLang.uploadifyDlgTitle = 'uploadify plugin';

下面的文件就是操作的界面,一个HTML文件,包含如下语句:
<script language="javascript">
var dialog = window.parent ;
var oEditor = dialog.InnerDialogLoaded() ;
var FCKLang = oEditor.FCKLang ;
</script>

我的界面文件index.html内容如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试</title>
<link href="inc/uploadify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="inc/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="inc/swfobject.js"></script>
<script type="text/javascript" src="inc/jquery.uploadify.v2.1.0.min.js"></script>
<script type="text/javascript">
var oEditor = window.parent.InnerDialogLoaded() ;
var FCK = oEditor.FCK ;
var FCKLang = oEditor.FCKLang ;

window.onload = function (){
window.parent.SetOkButton(true);
//加载界面的OK按钮
}

function Ok()
{
FCK.InsertHtml(document.getElementById('info2').value);
//插入ID="info2"文本控件的内容到FCKeditor的编辑器内容
return true ;
}

$(document).ready(function() {
$('#file_upload').uploadify({
'uploader'  : 'inc/uploadify.swf',
'script'    : 'upload.asp',
'cancelImg' : 'inc/cancel.png',
'folder'    : '/userfiles',
'auto'      : false,
'multi'  : true,
'sizeLimit':1024*1024*10,
'buttonText': 'Pickup Files',
'queueID': 'fileQueue',
'buttonImg': 'inc/select.jpg',
'fileDesc'  :'*.gif,*.jpg,*.png',
'fileExt'  : '*.gif;*.jpg;*.png',
'onComplete':function(event,queueId,fileObj,response,data){
   $('#info2').text($('#info2').text() + '<p><img src="'+response+'" ></p>r');
   //在页面上显示已上传文件的相对路径
   $('#info').append($('#info').text() + '<img src="'+response+'" >r');
   //在页面上显示已上传的图片
  }
});
});
</script>
</head>
<body>
<div id="fileQueue"><!--上传文件的列表--></div>
<input id="file_upload" name="file_upload" type="file" />
<p>
<a href="javascript:$('#file_upload').uploadifyUpload()">上传</a>|
<a href="javascript:$('#file_upload').uploadifyClearQueue()">取消上传</a>
</p>
<div id="info" ></div>
<textarea name="info2" id="info2" cols="45" rows="5"></textarea>
</body>
</html>