找了好久才找到的,发一份大家分享
原文地址:http://info.52z.com/html/6432.html
在此谢谢这位高人
FCKEditor是一个功能强大的开源在线编辑器,所以是非常适合我等兜兜无啥银子的人拿来“把玩”的~~~呵呵。一个产品即使功能再强大也不能满足所有用户的需求,当然FCKEditor也不例外咯。就拿我现在所开发的一个系统(工作流)来说,就遇到了FCKEditor不能满足我的要求的情况。因为我想在工具栏中加入自己的操作控制按钮,配置当然搞不定咯,就只有改源代码了。可一看FCKEditor经过处理后的JS源码,头立刻就大了——无换行无注释,一大堆JS代码堆在那里,想看懂几乎没门。当然它这样做也是有好处的,要不这大的一个东西加载怎么会那么快呢。看不懂处理后的JS源码,我们可以看有格式的源码嘛,所以就上网down了一个2.4的FCKEditor。好了,现在就让我们开始怎么一步一步的加入我们自己的操作菜单到工具栏中去。
比如我想加一个我自己的输入框用来控制日期的输入,即该输入框只能通过选择来选择日期,这个我们结合日期控件my97来做,呵呵,充分利用已有的成果。有人会说,我直接改它的对话框不就得了,当然这也是可以的,可我们今天要做的就是如何加入自己的工具栏操作,这样以后就可以依次类推,加入任何想要加入的操作了:-)。
首先,我们给这个日期输入框定一个名字,就叫做CTRL_Date吧。第一步嘛,我们就直接在fckconfig.js文件中的Basic工具条集(FCKConfig.ToolbarSets["Basic"])中加入这个名称,加进去很简单吧,呵,不多说了。然后呢,也得给它弄个中文名称什么的吧,直接打开语言文件zh-cn.js,英文的就不管了哈,加入:CTRL_Date : "日期控件"。另外还得加一个上下文语言提示菜单,这样在编辑区域内就可以通过右键选择属性来进行编辑操作了。也是在zh-ch.js中加入:CTRLDateProp : "日期控件属性"。到这里,又要回到fckconfig.js文件中了,我们在FCKConfig.ContextMenu中加入CTRL_Date,这样才能使其拥有上下文菜单嘛。到这里,基础工作就做完了,呵呵,然后就是艰巨的源码改造工程了,当然了也不要怕咯,一步一步来就没问题了~~@_@
我们解压下载的FCKEditor2.4,然后找到fckregexlib.js文件,找到其中的NamedCommands,然后把CTRL_Date加到最后,然后再修改fckeditor处理后的最终JS文件fckeditorcode_ie.js(只改IE的,至于FF就不管了,对不起它了,嘿)。网上说可以用一个什么程序来进行源码打包的,可我在下的压缩包里没看到呢,所以就只有手动修改这个最终的文件了。在该文件中找到NamedCommands这一位置然后在最后加入CTRL_Date,这样就注册了一个命令CTRL_Date了。然后再找到源代码文件夹中的fckcommands.js文件,是不是看到很多case啊,呵,这就是工具栏中每个操作的命令了。我们依葫芦画瓢,在最后加上:case 'CTRL_Date':oCommand=new FCKDialogCommand('CTRL_Date',FCKLang.CTRL_Date,'dialog/workflow/fck_ctrl_date.html',380,230);break ;这个意思就是说,当你单击工具栏上的日期控件的时候就会以模式对话框打开dialog/workflow/fck_ctrl_date.html这个网页文件,至于是什么内容,我们待会再说。这样写好后,我们就可以加入到fckeditorcode_ie.js文件中了。我们在fckeditorcode_ie.js文件中找到new FCKUndefinedCommand()这个位置,然后在它之后的break;之后加上我们刚才写的代码(注意把oCommand改为B后再加入,因为我的最终处理源码中是B,估计这样简写也是为了减少源码的大小吧)。这两个步骤完成后,我们就可以在工具栏中单击日期控件时打开我们自己定义的日期控件属性编辑的网页文件了。
然后还一工程就是增加该控件的上下文菜单,要不然在编辑区域右键选择时就会弹出输入框的属性和对话框了,这可不是我们想要的结果呢。我们还是先在源码中修改,然后再复制到最终处理的源码文件中去。找到文件fcktoolbaritems.js,也有很多case哦,看名字就知道这是设置工具栏中的按钮项了。同样,我们在最后加入:case 'CTRL_Date' : oItem=new FCKToolbarButton('CTRL_Date',FCKLang.CTRL_Date,null,null,null,null,51);break;注意其中的55表示的是该操作按钮的图标索引(这个索引指的是skins目录下的fck_strip.gif文件中图标的顺序索引),我们使用和输入框一样的图标就是51了。同样,我们在最终文件fckeditorcode_ie.js中查找字符串alert(FCKLang.UnknownToolbarItem.replace(/%1/g(注意把空格去掉),然后在它之前的default之前加入我们刚写的语句(同样把oItem改成B)。这是完成上下文菜单的第一步,还有第二步也就是最后一步了,胜利就在眼前哦,加油了,呵呵。
接着就是文件fck_contextmenu.js的修改了。一样也是很多case,我们加入如下语句
case 'CTRL_Date':return{AddItems:function(A,B,C){if(C=='INPUT'&&B.type=='text'&&B.className=='_wf_date'){A.AddSeparator();A.AddItem('CTRL_Input',FCKLang.CTRLDateProp,51);}}};(注意这里的A,B,C就是源码中menu,tag,tagName,这里直接写成A,B,C是为了直接插入到最终代码中去而已)。注意到上面中不是有个B.className=='_wf_date'么?这是因为FCKEditor中已经自带了input输入框的控制,所以这里我们用一个样式名称来区别它自带的还是我们自加的。当然这个样式名称可以随便取的,而且在fck_ctrl_date.html这个网页文件(我们自己写的来编辑日期控件的属性文件)中需要给日期控件也就是input输入框加上className="_wf_date"属性以示区别原有的input输入框。当然,我们还要修改原来的input的case,在fckeditorcode_ie.js文件中找到字符串case 'TextField':return {AddItems所在的位置(如果找不到请去掉或增加空格),然后修改if中的条件,加一个&&B.className!='_wf_date'。最后就把我们写的上面的代码加到TextField这个case之后就可以了。这样修改后就会使当右键单击某个元素时,如果是输入框并且样式名称不是我们指定的日期控件则会调用它自带的输入框属性编辑网页,如果样式名称是我们自己定义的日期控件的名称则会调用我们自己编辑的属性网页,这样就达到了同是输入框在查看属性时分别调用不同属性编辑网页的目的了。
好了,完成上面的所有步骤后就可以保存修改后的fckeditorcode_ie.js文件了。这里还有一点工作要做哦,就是在dialog目录下新建一个目录workflow,然后在它下新建一个日期控件属性输入的网页文件fck_ctrl_date.html。具体的内容我们可以直接copy FCKEditor自带的fck_textfield.html网页文件的内容过来,然后简单的修改下就可以了,但重要的是别忘了在ok函数中给你的日期控件加上className="_wf_date"属性哦,否则右键属性查看时则会调用FCKEditor自带的文本框输入的编辑网页了。
经过这么多步骤,已经全部完工了。赶快打开你的在线编辑器看看吧~~~~
有问题?直接google!
<script type="text/javascript"><!--
google_ad_client = "pub-0757178726455256";
google_ad_format = "js_sdo";
google_cts_mode ="rs";
google_num_cts = "2";
google_searchbox_width = 215;
google_searchbox_height = 26;
google_link_target = 2;
google_logo_pos = "left";
google_rs_pos = "right";
google_ad_height = 35;
google_ad_width = 760;
// --></script><script src="http://pagead2.googlesyndication.com/pagead/show_sdo.js" type="text/javascript"></script>
<script type="text/javascript"><!--
google_ad_client = "pub-0757178726455256";
/* 728x90, 创建于 09-6-17 */
google_ad_slot = "1633515232";
google_ad_width = 728;
google_ad_height = 90;
// --></script><script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"></script>
分享到:
相关推荐
FCKeditor是一个专门使用在网页上属于开放源代码的所见即所得文字编辑器。它志于轻量化,不需要太复杂的安装步骤即可使用。它可和PHP、JavaScript、ASP、ASP.NET、ColdFusion、Java、以及ABAP等不同的编程语言相结合...
在FCKeditor目录里的fckconfig.js打开,找到FCKConfig.ToolbarSets[“Default”] 这里的设置是配置功能按钮的,你需要的留下,不需要的可以删掉,也可以注释掉。 如需要多种配置,可以设置多个FCKConfig....
修正了FCKeditor的文件上传,用户可以自己修改FCKeditor\editor\filemanager\browser\default\FileUploadInFCK.aspx.cs文件中的SaveFile方法。灵活的实现自己对上传文件的管理。需要配合AjaxPro.2.dll
Fckeditor(综合利用工具)
网络版的在线编译器中默认的有很多工具,不想要那么多,也不想在原来的配置文件中修改,这时候就要自己定义配置文件了,本文档大致描述了怎么配置
FCKeditor是一个专门使用在网页上属于开放源代码的所见即所得文字编辑器。它志于轻量化,不需要太复杂的安装步骤即可使用
最近项目需要对已有的FCKeditor添加新的功能,以前的做法只是在外壳处再次封装,这次无法满足需求只能进行内部修改了。
fckeditor 2.6.3的完整实例,maven依赖管理,自定义配置文件引用,自定义工具栏,自定义表情,自定义模板,中文文件名乱码处理,中文文件夹创建乱码处理,中文图片名引用乱码处理,上传文件名自定义,fckeditor在...
fckeditor编辑器自定义按钮,弹出页面,返回数据添加到fck编辑器
FCKLang是语言包对象,您只要打开FCK/editor/lang/下面的相应语言包添加相应的名称属性就可以了,比如:MyAlbum打开我的像册。注意大小写!至此我们的添加工作已完成。
4.7 自定义工具栏按钮 17 4.8 自定义右键菜单 18 5 文件上传问题 19 5.1 开启和关闭文件上传功能(fckconfig.js) 19 5.2 文件上传的基本使用 19 5.3 上传中文文件名的文件会出现乱码 20 5.4 创建中文名目录会出现...
自定义工具栏, 修改fck菜单样式设置 7.附送媒体(avi,rm,rmvb,mp3...)上传所见即所得组件 8.附送youtube组件 <br>品质保证:通过此指南,100%保证你满意完成php环境下的fck配置。你可不买,但是你所付出的...
一直苦恼FCKeditor编辑器不能设置行距,文字设置大了就重叠在一起,终于找到解决办法了,发上来和大家分享!
FCKeditor2.3+2.6合并版——试用手记 博文链接:https://bugie.iteye.com/blog/235697
fckeditor漏洞测试工具,填写域名即可
FCKeditor添加行距操作详细步骤
改造背景: FCK作为开源的文章编辑器,很受欢迎,却没有文件删除功能。 改造目标: 提升FCK的功能,提供删除文件和文件夹的管理功能。...2:com\fredck\FCKeditor\connector\ConnectorServlet.java
fckeditor2.6 java jsp 解决上传乱码 自定义工具栏
fckeditor编辑器添加swfupload功能