博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
FCKeditor插件开发实例:uploadify多文件上传插件
阅读量:5130 次
发布时间:2019-06-13

本文共 2067 字,大约阅读时间需要 6 分钟。

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文件,界面文件中应该包含如下语句.

我的界面文件index.html内容如下:

测试

上传|取消上传

转载于:https://www.cnblogs.com/lixiaozhe/p/3149941.html

你可能感兴趣的文章
进程组
查看>>
css3新特性总结(可读性方面)
查看>>
js基本语法汇总
查看>>
Appium环境搭建
查看>>
深入理解C#多线程 -戈多编程
查看>>
Webpack学习 - Webpack项目建立
查看>>
(not) in 和 (not) exists区别
查看>>
我要开始学习计算机的基础知识
查看>>
JAR文件包及jar命令详解
查看>>
android 自定义动画4 RotateAnimation源码分析
查看>>
递归--放苹果
查看>>
scss组件定制的一些学习
查看>>
jquery淡入淡出
查看>>
Python基础-封装与扩展、静态方法和类方法
查看>>
启动Docker后台容器,测试运行Hello-world
查看>>
Redis的持久化
查看>>
Power BI Desktop 安装环境
查看>>
1055. 集体照 (25)
查看>>
C#飞行棋总结
查看>>
[转载]介绍一个JSONP 跨域访问代理API-yahooapis
查看>>