- 浏览: 232921 次
- 性别:
- 来自: 我也来自火星?
文章分类
最新评论
-
chengUFO:
Test tes = c.newInstance();执行以上 ...
自定义ClassLoader -
lliiqiang:
资料太少了,伪造客户端和事先标准以外数据为攻击,其它的是bug ...
Openlaszlo调用JavaRPC和JAVA类通信 -
tianshaojie:
楼主,为什么我安装你的方法建立工程后,访问就出错,我用的是ta ...
Tapestry4入门 -
panshunchang:
发帖过程这么辛苦,还要回答一大堆问题,受不了了
[常用代码整理]JAVA反射 -
活靶子:
生成一个join的SQL语句
SELECT items.* F ...
Better looking URLs with friendly_id
建立一个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插件的定义文件,内容如下:
//注册Code命令. 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()这个方法类似)。
// 注册名为”Code”的工具栏按钮 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文件,内容如下:
// ONLY CHANGE BELOW HERE 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 oEditor = window.parent.InnerDialogLoaded() ; 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.Config['CustomConfigurationsPath'] = '../editor/plugins/code/fckcustom.js'; oFCKeditor.ToolbarSet = "Plugin";
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'] ] ;
//注册Code命令. FCKCommands.RegisterCommand( 'Code', new FCKDialogCommand( 'Code', FCKLang.CodeDlgTitle, FCKPlugins.Items['code'].Path + 'fck_code.html', 340, 170 ) ) ;
这定义自己的工具栏,注意其中的[‘Code’],”Code”为刚才定义的”Code”工具栏命令按钮,通过FCKConfig.ToolbarSets将自定义的插件加入到了工具栏中。
下面给出code.html文件内容:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <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.CodeBtn = '插入代码' ; 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 ) ) ;
发表评论
-
vim补全
2009-10-13 16:42 0引用VIM自动不齐不需要特殊配置,只需要打开 filetype ... -
一次小项目的思考
2009-08-20 23:11 3439最近的一个项目,四个 ... -
IntelliJ Idea插件Jetty Integration恢复开发
2009-08-19 14:34 3581今天在je上面看到了一条新闻 Google 选择 Jetty, ... -
PowerDesigner 中将Comment(注释)及Name(名称)内容互相COPY的VBS代码
2009-07-30 14:05 2253在用PowerDesigner时.常常在NAME或Commen ... -
使用VisualSVN Server构建自己的版本库
2008-12-16 16:13 1703VisualSVN Server是用于Subversion管理 ... -
在laszlo方法中使用参数
2006-03-22 14:56 959<canvas debug="true&quo ... -
openlasz入门---openlaszlo环境的建立
2006-04-11 22:09 1695关于openlaszlo的介绍网站上面也蛮多了,所以,在这里也 ... -
Openlaszlo调用JavaRPC和JAVA类通信
2006-04-20 10:31 1832JavaRPC允许Laszlo客户端远程调用服务端的JAVA类 ... -
使用 JavaMail 收发邮件,解决中文附件问题
2007-02-07 11:22 3840几天来一直在开发一个项目,其中一部分需要用 JavaMail ... -
FCKEditor使用说明
2007-02-17 13:53 14911. FCKeditor 介绍 FCKeditor 这个开源的 ... -
一个不错的开源数据库H2
2007-02-17 14:10 1494H2是一个采用Java开发开源的嵌入式SQL数据库。它支持集群 ... -
JAVA获取系统当前的用户
2007-03-02 17:15 6723public class Test { ... -
Idea8试用
2008-03-23 21:56 1662刚刚在新闻频道看到关于Idea的新闻,对它的javascrip ... -
HtmlUnit测试页面
2008-03-02 22:29 9878HtmlUnit简介:引自 www.open-open.com ... -
java的数据结构
2007-11-11 19:04 1481线性表,链表,哈希表是常用的数据结构,在进行Java开发时,J ... -
P6SPY监控数据库性能
2007-11-11 18:51 2913P6SPY监控数据库性能 P6SPY通过对JDBC API的 ... -
Idea7.0注册机
2007-10-20 22:55 3227Idea7.0注册机 -
[转]普元JS验证
2007-09-16 22:25 1675* -------------------------- ... -
Apache和Subversion搭建版本控制环境
2007-08-03 23:40 15281. 安装Apache2.0.59(Apache 2.2.4和 ... -
IDEA的RUBY插件试用
2007-07-31 22:21 3872经过http://www.intellij.org.cn站长的 ...
相关推荐
本文将深入讲解FCKeditor插件开发的要点,包括插件的目录结构、注册命令、创建工具栏按钮以及安装插件的步骤。 首先,了解插件的目录结构至关重要。每个插件都应有一个与插件名称相同的目录,这个目录内必须包含一...
以下是一个简单的FCKeditor插件开发过程: 1. **创建插件目录**: 在FCKeditor的`editor/plugins`目录下,你需要创建一个新文件夹,例如`hello`,用于存放插件的所有文件。 2. **编写`fckplugin.js`**: 在`...
**fckeditor插件详解** fckeditor是一款基于JavaScript的开源网页编辑器,因其强大的功能和易用性而备受赞誉。在Web开发中,编辑器扮演着至关重要的角色,它允许用户在网页上直接编辑内容,就像在桌面应用中操作...
ASP.NET是微软开发的一种用于构建Web应用程序的框架,它提供了丰富的功能和易用性,而FCKeditor是一款流行的在线文本编辑器,常被用于创建富文本输入框,使得用户可以在网页上进行类似Word的文本编辑操作。...
总的来说,fckeditor编辑器插件的开发涉及JavaScript编程、DOM操作以及可能的服务器通信。理解其内部工作原理和提供的API,是开发高效、个性化的编辑体验的关键。通过对自定义按钮、弹出页面和数据集成的深入研究,...
**FCKeditor插件源代码详解** FCKeditor是一款经典的开源富文本编辑器,它为网页开发者提供了在浏览器端编辑HTML内容的强大工具。这款编辑器以其丰富的功能、易用性和可扩展性闻名,广泛应用于各类网站和应用程序。...
5. **FCKEditor插件开发** 如果默认功能不能满足需求,开发者可以编写自定义插件来扩展FCKEditor的功能。例如,可以创建一个插件,允许用户在上传图片前预览并手动调整缩略图的大小。 6. **优化用户体验** 图片...
1. **FCKeditor插件开发**: - 插件结构:FCKeditor的插件通常由一个或多个JavaScript文件组成,这些文件定义了插件的核心功能和用户界面元素。 - 插件注册:需要在`fckconfig.js`中注册新插件,添加到可用的插件...
4. **插件与样式问题**:FCKeditor允许自定义插件和CSS样式,以满足特定需求。在`fckconfig.js`文件中进行配置。 **四、高级应用与优化** 1. **自定义工具栏**:通过修改`fckconfig.js`文件,你可以定制编辑器的...
**FCKeditor热区插件详解** FCKeditor是一款经典的开源HTML编辑器,它允许用户在网页上创建和编辑富文本内容,就像在Word中一样。这个“fckeditor热区插件”是为了扩展FCKeditor的功能,使其支持图片热区(Hotspot...
这个压缩包“FCKeditor开发jar包及fckeditor文件夹”包含的是FCKeditor的开发相关资源,主要分为两部分:jar包和fckeditor文件夹。 1. **FCKeditor jar包**: 这个jar包通常包含了FCKeditor的Java版本,是将...
FCKeditor 是由Fernando Monteiro开发的一款JavaScript实现的网页文本编辑器,其设计目标是提供一个类似Word的用户界面,使非程序员也能轻松编辑网页内容。FCKeditor 支持HTML、CSS、JavaScript等,同时具备拖放...
在压缩包中的`fckeditor.js`文件可能包含了FCKeditor的核心逻辑,而`fckeditor.properties`文件则可能包含了一些配置参数,这些参数可能会影响到Media插件的行为和设置。 4. **与Java的结合**:尽管FCKeditor本身是...
**二、FCKeditor插件系统** FCKeditor的强大之处在于其插件系统,开发者可以通过编写插件扩展其功能。插件通常包括以下部分: 1. **插件定义**:定义插件的基本信息,如名称、版本、作者等,并注册到FCKeditor中。...
**fckeditor文档编辑器插件详解** 在网页开发过程中,为了提供用户友好的内容编辑体验,开发者常常会使用文档编辑器插件。fckeditor就是这样一款强大的Web页面编辑工具,它为用户提供了类似Microsoft Word的界面,...
FCKeditor提供了丰富的API和插件机制,开发者可以根据需求扩展编辑器的功能,如添加自定义按钮、集成第三方服务等。此外,通过修改源码,还可以实现更深度的定制,以满足特定项目的独特需求。 总之,这个压缩包为...
在这个特定的资源包“JSP版FCKeditor附最新Java开发包 v2.4”中,我们关注的是FCKeditor的一个版本,它被优化以适应JSP环境,并且提供了最新的Java开发包。 FCKeditor是一款著名的开源HTML文本编辑器,其设计目标是...
使用FCKeditor插件的步骤大致如下: 1. **下载与安装**:从官方网站或者其他可靠的资源获取FCKeditor的压缩包,解压到服务器或本地开发环境中。 2. **配置编辑器**:根据项目需求,修改配置文件(通常为fckconfig....
4. **自定义扩展**:开发者可以通过API和插件系统对FCKeditor进行扩展,添加自定义功能或修改原有功能,以满足特定需求。 5. **多语言支持**:内置多种语言包,方便不同地区的用户使用。 6. **源代码视图**:用户...