扩展FCKeditor
由于项目的需求,要弄一个HTML编辑器,对这个编辑器进行扩展,现有一个FreeTextBox,因为是网上公开的源码,所以功能在一些方面有限制,所以在网上一顿狂找,找到了一些,后来决定用FCKeditor(http://www.fckeditor.net/),打开源码我就崩溃了
,全是Javascript,看的头大.不过界面看上去比较好看.所以决定扩展它。
文件组织
先加入自己的一个Button,在lang\zh-cn.js中加入自己的Button的Name和名称的键值.
fckconfig.js是一个ToolBar与Button关系的配置文件。
Js这个文件夹下面没太仔细看,我觉得可能是为了适应多浏览器的.fckeditorcode_ie.js,fckeditorcode_gecko.js,这个文件里面存在着_source文件夹下面的大部分代码(没搞明白为什么这么做.),但只要改fckeditorcode_ie.js这个文件就可以达到效果。
fckeditorcode_ie.js文件中主要函数:
var FCKToolbarItems={...}主要是展示ToolBar上的Button及显示的一些设置。比如,显示Button的图标,或是文字等...
var FCKDialogCommand={...} 执行的函数的具体内容。
var FCKCommands={...} 为每个ToolBar上的Button所绑定执行的函数。
FCKeditor的Button的图标比较BT
,是通过一张大的图片.用绝对位置来取相应的小图标.我倒.不知道为什么这么做! ![](https://www.cnblogs.com/Emoticons/QQ/04.gif)
最终效果:
![](https://www.cnblogs.com/Emoticons/QQ/19.gif)
文件组织
![]() |
先加入自己的一个Button,在lang\zh-cn.js中加入自己的Button的Name和名称的键值.
fckconfig.js是一个ToolBar与Button关系的配置文件。
Js这个文件夹下面没太仔细看,我觉得可能是为了适应多浏览器的.fckeditorcode_ie.js,fckeditorcode_gecko.js,这个文件里面存在着_source文件夹下面的大部分代码(没搞明白为什么这么做.),但只要改fckeditorcode_ie.js这个文件就可以达到效果。
fckeditorcode_ie.js文件中主要函数:
var FCKToolbarItems={...}主要是展示ToolBar上的Button及显示的一些设置。比如,显示Button的图标,或是文字等...
var FCKDialogCommand={...} 执行的函数的具体内容。
var FCKCommands={...} 为每个ToolBar上的Button所绑定执行的函数。
FCKeditor的Button的图标比较BT
![](https://www.cnblogs.com/Emoticons/QQ/icon10.gif)
![](https://www.cnblogs.com/Emoticons/QQ/04.gif)
最终效果:
![]() |