fckeditor学习心得（二）

 

四、       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的事件监听机制实现。

 

额外：接触了新的js，如document.selection.createrange,textrange,这段代码在用来获取选择的内容等方面。

 

4、  fckdialog.html

当做文件上传，图片上传，flash，视屏上传等操作时候，将在打开的窗口中加载该html，实现上传操作。

五、       用户使用体验

有几个问题，如下：

1、  将上传后的图片最好是保存在数据库中，现在是保存在物理文件中。以及将图片保存到数据库后，图片如何访问，且，还要更改插入图片后，在编辑区域内源码中图片的地址。

2、  有时间可以深入了解js的相关事件处理，例如onclick,onmousexxx,onkeyxxx,onload;选择区域的处理获取等。

3、  Js中的转义

4、