四、 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、