FCKeditor是一个专门使用在网页上属于开放源代码的所见即所得文字编辑器。它志于轻量化，不需要太复杂的安装步骤即可使用。它可和PHP、JavaScript、ASP、ASP.NET、ColdFusion、Java、以及ABAP等不同的编程语言相结合。“FCKeditor”名称中的“FCK” 是这个编辑器的作者的名字Frederico Caldeira Knabben的缩写。

FCKeditor是开源的，而且效果不错。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>

FCKeditor插件开发实例：uploadify多文件上传插件的更多相关文章

  1. Uploadify多文件上传插件.NET使用案例+PHP使用案例

    ploadify是一个非常好用的多文件上传插件 插件下载:http://www.uploadify.com 下载后需要用到的文件: 接下来就是直接添加代码: Default.aspx代码 <%@ ...

  2. uploadify多文件上传实例--C#

    下载uploadify文件 http://www.uploadify.com/ HTML(视图) <html lang="zh-cn"> <head> &l ...

  3. jquery uploadify文件上传插件用法精析

      jquery uploadify文件上传插件用法精析 CreationTime--2018年8月2日11点12分 Author:Marydon 一.参数说明 1.参数设置 $("#fil ...

  4. 详解jQuery uploadify文件上传插件的使用方法

    uploadify这个插件是基于js里面的jquery库写的.结合了ajax和flash,实现了这个多线程上传的功能. 现在最新版为3.2.1. 在线实例 实例中用到的php文件UploaderDem ...

  5. 强大的支持多文件上传的jQuery文件上传插件Uploadify

    支持多文件上传的jQuery文件上传插件Uploadify,目前此插件有两种版本即Flash版本和HTML5版本,对于HTML5版本会比较好的支持手机浏览器,避免苹果手机Safari浏览器不支持Fla ...

  6. jQuery文件上传插件Uploadify（转）

    一款基于flash的文件上传,有进度条和支持大文件上传,且可以多文件上传队列. 这款在flash的基础上增加了html5的支持,所以在移动端也可以使用. 由于官方提供的版本是flash免费,html5 ...

  7. jQuery 文件上传插件：uploadify、swfupload

    jQuery 文件上传插件: uploadify.swfupload

  8. 一款基于uploadify扩展的多文件上传插件，完全适用于Html5

    http://www.uploadify.com/documentation/  官网里面有两个插件,一个是要使用flash插件才能文件上传的插件,另外一个是不需要使用要flash插件的文件上传插件完 ...

  9. 多文件上传插件Stream，是Uploadify的Flash版和Html5版的结合，带进度条，并支持html5断点续传(附件上传)，拖拽等功能

    是根据某网的文件上传插件加工而来,支持不同平台(Windows, Linux, Mac, Android, iOS)下,主流浏览器(IE7+, Chrome, Firefox, Safari, 其他) ...

随机推荐

  1. JS原型的剖析与理解

    原型相关的概念 关于面向对象的概念 类 class 在js中就是构造函数 在传统的面向对象语言中,使用一个叫类的东西定义模版,然后使用模版创建对象 在构造方法中也具有类似的功能,因此称其为类 实例与对 ...

  2. jQuery 幻灯片 ----摘录

    Cloud Carousel (演示 | 下载) ShineTime (演示 | 下载) Nivo Slider (演示 | 下载) Interactive Photo Desk (演示 | 下载) ...

  3. Flask学习记录之Flask-Admin

    相信用过Django框架的都不会忘记它强大的Admin功能,Flask-admin是一款能够与Django Admin所媲美的扩展,能够快速创建Web管理界面,实现了用户.文件增删改查等常用功能:也可 ...

  4. iOS 容易引“起循环引用”的三种场景

    笔者在阅读中总结了一下,在iOS平台容易引起循环引用的四个场景: 一.parent-child相互持有.委托模式 [案例]:   @interface FTAppCenterMainViewContr ...

  5. ServletConfig对象 【通过此对象获取到web.xml中的信息】

    用途:       1)想让当前的Servlet读取一些在web.xml文件配置的初始化参数时,                      可以使用ServletConfig对象,他是Servlet运 ...

  6. cf B. Dima and To-do List

    http://codeforces.com/contest/366/problem/B 从0到k枚举起点,然后i+k判断是不是i+k>=n如果是i=(i+k)%n;否则i=i+k; #inclu ...

  7. NoMachine 远程桌面控制

    它是一个基于企业级对比套装的开源的终端服务器.它允许用户在连接速度缓慢或者窄带宽的情况下,对X11会话进行远程访问. NX项目提供一整套的运行库文件以及优化的来自X11,SMB,IPP,HTTP及其网 ...

  8. CSS中display:block的使用介绍

    在CSS的规定中,每个页面元素都有一个display的属性,用于确定这个元素的类型是行内元素,还是块级元素: (1)行内元素:元素在一行内水平排列,依附于其他块级元素存在,因此,对行内元素设置高度.宽 ...

  9. windows oid 利用SNMP获得主机信息(转)

    该博文转至:http://blog.sina.com.cn/s/blog_853cc55b0101a2mq.html Windows OID' for CPU, Memory, Disk Utiliz ...

  10. bzoj1047-理想的正方形(二维单调队列)

    题意: 给一个矩阵,给出行列和每个数,再给出一个N,求出所有N*N的子矩阵中最大值最小值之差的最小值解析: 暴力枚举肯定不行,这题可以用二维单调队列做,把同一行的连续N个点缩成一个点保存最大最小值预处 ...