FCKeditor插件开发
建立一个WTP的WEB工程,解压FCKeditor的压缩包,将压缩包下面的FCKeditor目录拷贝到建立的WEB工程的WebContent目录下,目录结构如图所示:
下面对FCKedior目录下面的目录及文件作一个说明:
(1) “_”开头的目录或文件为FCKeditor的DEMO等资料,都可以在工程中删除
(2) editor目录
该目录为FCKeditor主要目录,目录结构如图:
该目录为FCKeditor的核心目录,包含了FCKeditor的核心文件,其中:
(1)_source为FCKEditor的源文件目录
(2)css为FCKeditor的样式文件目录
(3)dialog为FCKeditor工具栏中相应的工具按钮的弹出对话框文件目录
(4)filemanager为FCKeditor处理文件上传的文件目录
(5)images为FCKeditor中增加表情头像等资源的图像文件目录
(6)js为FCKeditor的核心javascript文件目录
(7)lang为FCKeditor的语言文件目录,包含国际化支持。
(8)plugins为FCKeditor的插件目录,FCKeditor的插件开发文件都放入该目录
(9)skins为FCKeditor的皮肤文件,自带三种皮肤文件default,office2003和silver。
本文所写的插件开发,主要就是在plugins目录下进行的。下面说明如何编写FCKeditor插件:(在编写插件的时候借鉴了FCKeditor的插件placeholder,该插件也在plugins目录下)
(1) 在plugins目录下面新建code目录
(2) 在code目录下面新建lang目录
目录结构如图所示:
(3) 新建fckplugins.js文件,该文件为FCKeditor插件的定义文件,内容如下:
FCKCommands.RegisterCommand( 'Code', new FCKDialogCommand( 'Code', FCKLang.CodeDlgTitle, FCKPlugins.Items['code'].Path + 'code.html', 340, 170 ) ) ;
// 注册名为”Code”的工具栏按钮
var oCodeItem = new FCKToolbarButton( 'Code', FCKLang.CodeBtn ) ;
oCodeItem.IconPath = FCKPlugins.Items['code'].Path + 'code.gif' ;
FCKToolbarItems.RegisterItem( 'Code', oCodeItem ) ;
// 创建FCKCodes对象,通过FCKCodes对象处理工具栏按钮的操作
var FCKCodes = new Object() ;
下面分加对上面的各个命令作一下说明:
通过FCKCommands的RegisterCommand命令注册一个名为”Code”的命令,new FCKDialogCommand()说明”Code”命令为一个对话框命令,FCKLang.CodeDlgTitle为弹出对话框的标题,它的值在code目录下的lang目录下的语言文件中定义,lang目录下面en.js,zh_cn.js等是语言的资源文件,采用国际化资源文件的命名方式,下面给出zh_cn.js的内容:
FCKLang.CodeDlgTitle就说明在语言文件中有一个键为FCKLang.CodeDlgTitle的字符串。
FCKPlugins.Items['code'].Path + 'code.html', 340, 170 ) ),这个方法主要是用来加载code目录下面的code.html网页文件(该网页的内容在下面给出),上面说到的弹出对话框,就是以窗口的方式显示code.html这个网页文件。而下面的340,170是弹出的网页的大小(这个和windows.open()这个方法类似)。
var oCodeItem = new FCKToolbarButton( 'Code', FCKLang.CodeBtn ) ;
oCodeItem.IconPath = FCKPlugins.Items['code'].Path + 'code.gif' ;
通过FCKToolbarButton来定义一个名为”Code”的工具栏按钮,FCKLang.CodeBtn同样为获取语言文件中的字符串。
FCKPlugins.Items['code'].Path + 'code.gif' 用来加载code目录下面的”code.gif”图像文件,该图像用为工具栏按钮的位图文件。
FCKToolbarItems.RegisterItem( 'Code', oCodeItem ) 最后通过FCKToolbarItems.RegisterItem注册”Code”按钮。
(注意:上面的”code”都为plugins下面定义的”code”插件的目录名)
下面是fckcustom.js文件,内容如下:
FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/silver/';
FCKConfig.Plugins.Add( 'code', 'en,zh,zh-cn' ) ;
FCKConfig.ToolbarSets["Plugin"] = [
['Source','-','-','Templates'],
['Cut','Copy','Paste','PasteWord','-','Print','SpellCheck'],
['Undo','Redo','-','Find','Replace','-','SelectAll'],
'/',
['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
['OrderedList','UnorderedList','-','Outdent','Indent'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['Link','Unlink'],
'/',
['Image','Table','Rule','Smiley'],
['FontName','FontSize'],
['TextColor','BGColor'],
['-','Code']
] ;
FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/silver/'为设定FCKeditor的皮肤文件,这些皮肤文件就是在FCKeditor/editor/skins目录下面的皮肤文件。
FCKConfig.Plugins.Add( 'code', 'en,zh,zh-cn' ) 为加载刚才自己定义的”code”插件(注意:这里的”code”都为plugins下面定义的”code”插件的目录名),后面的’en,zh,zh-cn’为该插件支持的语言,这里指定支持英文,简体中文和繁体中文(需要在插件目录的lang目录中编写语言文件)
可以看到,这就是一个普通的HTML文件,里面可以写HTML标签,也支持javascript的脚本语言,需要说明的是下面部分:
如上面代码所示,首先要加载自己定义的FCKeditor配置文件,就是我们刚才写的fckcustom.js文件,加外,我们在上面已经在自定义的ToolbarSets ---“Plugin”中加入了自定义的”Code”工具栏按钮,所以我们只要在FCKeditor中指定使用”Plugin”这一个工具栏设置就可以了。
最后效果如下图所示:
注意工具栏右下角的”码”工具栏按钮,就是自己定义的按钮,”码”为code.gif图片内容,下图为弹出的网页:
var FCKLang = oEditor.FCKLang ;
var FCKCodes = oEditor.FCKCodes ;
window.onload = function ()
...{
oEditor.FCKLanguageManager.TranslatePage( document ) ;
window.parent.SetOkButton( true ) ;
}
var oEditor = window.parent.InnerDialogLoaded()通过这个方法,来获取弹出网页的父网页
接着就可以这个oEditor对象来获取FCKeditor的资源,包括刚才自定义的插件对象,像下面的
var FCKCodes = oEditor.FCKCodes来获取在fckplugins.js中定义的FCKCodes对象。
加一个要说明的地方是<span fckLang="CodeDlgName">,可以通过fckLang这个标签来获取在lang目录下面的语言文件中的语言资源,以此来实现FCKeditor的国际化。
通过window.onload()方法中网页文件加载时调用上面创建的oEditor对象的FCKLanguageManager对象的TranslatePage(document)方法给页面加入国际化支持。
并且指定父窗口的”Ok”命令可用。
在FCKeditor中调用自定义插件
oFCKeditor.ToolbarSet = "Plugin";
['Source','-','-','Templates'],
['Cut','Copy','Paste','PasteWord','-','Print','SpellCheck'],
['Undo','Redo','-','Find','Replace','-','SelectAll'],
'/',
['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
['OrderedList','UnorderedList','-','Outdent','Indent'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['Link','Unlink'],
'/',
['Image','Table','Rule','Smiley'],
['FontName','FontSize'],
['TextColor','BGColor'],
['Code']
] ;
这定义自己的工具栏,注意其中的[‘Code’],”Code”为刚才定义的”Code”工具栏命令按钮,通过FCKConfig.ToolbarSets将自定义的插件加入到了工具栏中。
下面给出code.html文件内容:
<html>
<head>
<title>Code Properties</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta content="noindex, nofollow" name="robots">
<link href="stylesheets/highlight.css" media="screen" rel="Stylesheet"
type="text/css" />
<script language="javascript">
var oEditor = window.parent.InnerDialogLoaded() ;
var FCKLang = oEditor.FCKLang ;
var FCKCodes = oEditor.FCKCodes ;
window.onload = function ()
{
oEditor.FCKLanguageManager.TranslatePage( document ) ;
window.parent.SetOkButton( true ) ;
}
function Ok()
{
var select = document.getElementById('code_type');
FCKCodes.Add(select.options[select.selectedIndex].innerHTML,document.getElementById('code_text').value);
return true ;
}
</script>
</head>
<body scroll="no" style="OVERFLOW: hidden">
<table height="100%" width="95%" align="center">
<tr height="40">
<td><span fckLang="CodeDlgName"></span></td>
<td>
<select id="code_type">
<option selected="selected">java</option>
<option>ruby</option>
<option>python</option>
<option>c/c++</option>
<option>c#</option>
<option>sql</option>
<option>xml</option>
<option>css</option>
<option>javascript</option>
</select>
</td>
</td>
</tr>
<tr valign="top">
<td><span fckLang="Code"></span></td>
<td><textarea id="code_text" cols="90" rows="20"></textarea></td>
</tr>
</table>
</body>
</html>
FCKLang.Code = '代码';
FCKLang.CodeDlgTitle = '插入代码' ;
FCKLang.CodeDlgName = '语言' ;
FCKLang.CodeErrNoName = '请输入代码' ;
//注册Code命令.
FCKCommands.RegisterCommand( 'Code', new FCKDialogCommand( 'Code', FCKLang.CodeDlgTitle, FCKPlugins.Items['code'].Path + 'fck_code.html', 340, 170 ) ) ;
http://blog.csdn.net/flying_huang/article/details/1539206
FCKeditor插件开发相关推荐
- ATS插件开发中内存泄露问题的解决方法探讨
接触ATS开发已经有几年了,开发过内核的模块,也从事过插件的开发.内存泄露问题一直是一个困扰大多数ATS开发者的头疼的问题,下面说说我自己的感受和思考.这里这关注ATS插件开发这个话题.源码的exam ...
- FCKeditor如何升级CKEditor及使用方法
之前编辑器用的是FCKeditor,因为项目原因需要升级为最新版本4.2.2,发现是已经更名为CKEditor. 百度了一下,据官方的解释,CK是对FCK的代码的完全重写. 项目环境是asp.net的 ...
- .net下的富文本编辑器FCKeditor的配置方法(图)原创
.net下的富文本编辑器FCKeditor的配置方法(图)原创 FCKeditor是一款开源的富文本编辑器,几乎支持所有流行的Web开发语言,版本稳定,用户多,可配置性好. 以前做Java和php的时 ...
- jQuery插件开发 - 其实很简单
[前言] jQuery已经被广泛使用,凭借其简洁的API,对DOM强大的操控性,易扩展性越来越受到web开发人员的喜爱,我在社区也发布了很多的jQuery插件,经常有人询问一些技巧,因此干脆写这么一篇 ...
- ASP.NET2.0 文本编辑器FCKeditor的冰冷之心 【月儿原创】
ASP.NET2.0 文本编辑器FCKeditor的冰冷之心 作者:清清月儿 主页:http://blog.csdn.net/21aspnet/ 时间:2007.4.9 FCKed ...
- jquery 插件开发的作用域及基础
2019独角兽企业重金招聘Python工程师标准>>> 之前一直有开发jquery插件的冲动,所以一直想学习如何进行插件开发,最近一个项目需要使用图片上传组件及自动无限下拉组件,百度 ...
- Nutch插件开发及发布流程
2019独角兽企业重金招聘Python工程师标准>>> 一,插件开发流程: 1,Nutch开发客户端环境搭建 2,plugin的源代码则保存在/src/java/org/apach ...
- ASP.net:添加.net(2.0C#)FCKeditor在线编辑器步骤
1.下载本版本的编辑器压缩包.源码下载地址 2.解压缩打开文件夹拥有如下文件: 3.在VS中添加"选择项"加载在此文件夹的Bin下FredCK.FCKeditorV2.dll. 4 ...
- Fckeditor PHP/ASP File Upload Vul
目录 1. 漏洞描述 2. 漏洞触发条件 3. 漏洞影响范围 4. 漏洞代码分析 5. 防御方法 6. 攻防思考 1. 漏洞描述 FCKeditor是目前最优秀的可见即可得网页编辑器之一,它采用Jav ...
最新文章
- 关于unity的一个不错的插件平台
- js 拖动层示例[转]
- python ui bs_Guibs的Python学习_列表
- kafkatool 配置_kafka tools的使用
- C Primer Plus(第五版)7
- 计算机的好处英语,跪求一篇英语作文 题目:论计算机的优缺点
- Linux引导过程与服务控制、排障演示及运行级别(详细图解)
- Docker container与宿主进程相互隔离的实现原理
- javascript设计思维
- java自学 day8
- 浅谈C#中的枚举 【转自http://www.cnblogs.com/liyingyi/archive/2005/12/28/306772.html】
- 深度学习-吴恩达-笔记-5-深度学习的实践层面
- python pip安装
- NBU备份数据库时的ORA-27211错误分析解决
- python 找色点击_[原创]python实现触动精灵引擎找色找字函数,为机器学习添加手脚...
- PHP生成海报/PHP合并图片/PHP图片处理
- 结合Delphi和Python的优势:使用Delphi VCL组件快速构建超现代的Python本机Windows GUI桌面酷炫用户界面应用
- 围城如社会,故事如生活
- Spring5春天还是配置地狱
- python语言编程:itertools.product的简介、使用方法(求笛卡尔积等)之详细攻略
热门文章
- osql sql2012_您可能不知道SQL Server实用程序-SQLdiag,osql和SqlLocalDB
- 怎么调节Ubuntu系统的屏幕亮度
- 昨天食物中毒,至今浑身酸痛
- 实训|第十一天学习一下linux中的进程,文件查找,文件压缩与IO重定向
- 基于visual Studio2013解决面试题之0507字符串转整数
- [.NET] 在Windows系统中搭建基于.NET的iPhone应用程序虚机开发环境
- C++创建动态链接库(*.dll)
- Codeforces Edu Round 64 (Rated for Div. 2)
- 代码审计 phpcmsv9 MVC介绍
- 用户在登录的时候,密码输入错误也能登录问题