fckeditor学习心得（二）

最新推荐文章于 2025-08-07 10:54:13 发布

qushaoyan

最新推荐文章于 2025-08-07 10:54:13 发布

阅读量174

点赞数

CC 4.0 BY-SA版权

分类专栏： jsp and servlet 文章标签： fckeditor IE JSP 浏览器数据结构

本文链接：https://blog.csdn.net/qushaoyan/article/details/83725606

jsp and servlet 专栏收录该内容

3 篇文章

订阅专栏

本文深入解析FCKeditor的代码结构及工作原理，涵盖核心JS文件fckeditorcode_ie.js的功能实现，配置文件fckconfig.js的设定，以及编辑器主体文件fckeditor.html的布局与初始化流程。同时介绍了用户交互体验的关键点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

四、 Fckeditor编辑器---------代码结构剖析

主要代码涉及包中的几个文件，如下：

1、 fckeditorcode_ie.js

这个是最主要的js文件，编辑器的初始化，以及主要的事件处理，都是由该js文件实现。如果浏览器是用的是ie，那么就是fckeditorcode_ie.js；如果是别的编辑器，那就使用别的后缀的该文件。其次，该文件是糅合了很多其他js文件（editor/source目录下）的结果。该文件很长，里面定义了很多js对象，那么每个js对象其实都有单独的js文件；在调试代码学习代码时候，可以参考那些单独的。但是实际程序调用，只调用该js。具体有关该文件，可以参考附件中该文件的注释。

2、 fckconfig.js

该js文件主要是关于编辑器的功能上的默认配置，定义了一些配置上的常量；例如，几种模式下工具条按钮的设置；上传文件的处理url等。

3、 fckeditor.html

作为编辑器主体的html文件，定义了编辑器的结构，为：

行数	内容		备注
1、	第一行工具条toolbar部分，含有所有的工具菜单按钮。也即上图中红色线框内容。在该行，又分为了两行。	第一行，折叠工具按钮点击，折叠后会显示的部分
		第二行，默认显示的是该行。有四部分，左边和右边的边框；中间两个：一个是折叠按钮；二个是工具集toolbar的主要部分
2、	第二行为编辑区域，id号为xeditorarea，用于编辑文字,即上图中绿色框框的内容。在所见即所得模式下：是嵌套了iframe，iframe的src即为可编辑的一个html页面（如上图所示，是我为突出效果，故意缩小后的编辑窗口，实际使用中，iframe是占满该区域的）。在源码模式下，创建了textarear，嵌入到xeditorarea元素中。
3、	本行本来不存在，是我为了测试，而添加的一行，纯粹为了玩。

以上以表格的形式形象的展现了fckeditor.html的结构。

该页面的功能除了定义上述的页面结构外，还加载了需要的js文件，定义了js方法；用于编辑器的初始化，注册事件监听处理方法，响应编辑器各种事件处理。下面，将按照具体的执行顺序，介绍页面加载编辑器初始化过程：

序号	文件名	方法名	备注
1、	Fckeditor.html	216行，window.onload = function()；	编辑器加载的入口，开始。初始化fckeditorapi,调用FCK_PreloadImages
2、	Fckeditorcode_ie.js	1052行，FCK_PreloadImages	根据fckconfig.js定义的变量，预加载图片；并设置加载完成后的下一步方法：A.OnComplete = LoadToolbarSetup;
3、	Fckeditor.html	226行，LoadToolbarSetup	加载工具条的入口方法，在该方法中将调用Fckeditorcode_ie.js文件中的方法完成工具条区域的设置，包括加载生成按钮，注册按钮的onclick事件监听方法。
4、	Fckeditor.html	247行，StartEditor	创建编辑区域的开始，在xeditingarear元素内部创建iframe；并设置xeditingarear的各种事件监听处理。
5、	Fckeditor.html	271行，WaitForActive	当状态改变的时候（调用SetStatus），会调用该方法（通过 fck.Events.FireEvent('OnStatusChange', A);）；当编辑器区域加载完成后，将调用该方法，做后续的设置，例如：添加表单onsubmit事件的处理方法；
6、	用户自定义的jsp文件中，例如：sample01.jsp	FCKeditor_OnComplete	当编辑器加载完成后，将调用在用户jsp文件中定义实现的FCKeditor_OnComplete方法，用于做一些编辑器加载完成后的处理。

总结：（1）首先在初始化fckeditorapi的时候，设置linkedfield域的值为A；（2）将A进行html编码；（3）添加js；（4）在所见即所得模式下，创建iframe，嵌入到xeditingarea元素中；源码模式下，创建textarea,嵌入到xeditingarea元素中。（5）在所见所得模式下，加载完毕后，要注册各种事件监听方法，有onclick,onmouserxxx,onkeyxxx等。以及选择事件监听处理。工具条按钮，鼠标右键，快捷键，表单提交等等，都是通过js的事件监听机制实现。