FCK编辑器(FCKEditor)添加新按钮和功能的修改方

网络编程 2025-03-24 00:49www.168986.cn编程入门

近期,我们面临着一个任务,那就是在已经存在的FCKeditor上添加新的功能。以前的方法仅仅是进行外壳封装,但现在这已无法满足我们的需求,我们需要深入到内部进行修改。这是一次对编辑器核心的挑战,也是一次创新的机会。

我们需要修改的文件包括fckconfig.js、zh-.js、en.js、fckeditorcode_gecko.js以及针对IE浏览器的fckeditorcode_ie.js。如果你想要支持两种浏览器,那么这两个文件都需要进行修改。

第一步,我们要在工具栏中添加功能按钮。在fckconfig.js文件中的FCKConfig.ToolbarSets["Default"]数组里添加按钮名称,比如['Bold','Italic','-','About', 'mydiy']。

接下来,为这些按钮添加中文名称和英文名称。在zh-.js和en.js文件中,为你的按钮分别起一个中文名字和英文名字,例如mydiy的中文名字是“我的自定义按钮”,英文名字是"mydiybutton"。

第三步,让工具栏显示你的按钮。在fckeditorcode_gecko.js(或fckeditorcode_ie.js)文件中查找类似case 'NewPage':的代码段,并在其后面添加你的按钮代码。比如:case 'mydiy':B=new FCKToolbarButton('mydiy',FCKLang.mydiy,null,null,false,true,50)。这样,你的按钮就可以在工具栏中显示了。

第四步,定义按钮的功能原型。在同样的文件中,找到类似var FCKNewPageCommand=function(){this.Name='NewPage';}的代码段,然后定义你的按钮功能原型。例如:var FCKmydiyCommand=function(){this.Name='mydiy';},然后在Execute函数里写你所需要的代码或函数。

最后一步,实例化按钮功能。还是在fckeditorcode_gecko.js(或fckeditorcode_ie.js)文件中,找到类似case 'NewPage':B=new FCKNewPageCommand();的代码段,然后进行实例化,如:case 'mydiy':B=new FCKmydiyCommand();。

至此,你已经成功地为FCKeditor添加了自定义按钮。如果你想要为按钮添加快捷键,你可以在fckconfig.js文件中的FCKConfig.Keystrokes = []里添加[ CTRL + 71 /G/, 'mydiy' ]。这样,用户就可以通过快捷键快速调用你的自定义按钮了。以上内容来自萍客小居(

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by