论文部分内容阅读
摘要：文章介绍了基于FCKeditor能自动隐藏的在线文本编辑器的设计原理，并提供相关的主要代码。该方法简单有效，代码可移植性非常好，用户也可方便地根据不同需求做相应的修改。基于这种设计原理，对于其他的在线编辑器也可进行相似的设计。
关键词：在线文本编辑器；FCKeditor；自动隐藏
中图分类号：TP311文献标识码：A文章编号：1009-3044(2008)24-1198-02
The Design of Multiply Text Editor for Internet Based on FCKeditor
RAO Yong-sheng1, WANG Ying2
(1.Institute of Educational Software, Guangzhou University, Guangzhou 510006, China; 2.South China Institute of Software Engineering, Guangzhou 510006, China)
Abstract: This article introduces the design theory of auto-hide about the editor for internet based on FCKeditor. And give the primary codes which make the online editor be auto-hiding. This method is simply, effective, and with good translated and expansibility. Based on this theory, we can do similar things to other online editor.
Key words: the text editor; FCKeditor; auto-hide
在建设具有交互性网站时，都允许用户输入数据，如发表评论、新增主题、发送信息等，而如今所输入的数据所包含的不仅仅是文本信息，还包括图片、链接、FLASH，甚至音频和视频等，这就不是HTML提供的TEXT或TEXTAREA所能完成的，一般的开发者都会使用第三方的在线编辑器来实现，这样对开发者和用户都极为方便。第三方的在线编辑器有很多，FCKeditor是其中一个使用较多、免费的编辑器。
1 FCKeditor简介
FCKeditor（FCKeditor主页：http://www.fckeditor.net）是一个专门使用在网页上属于开放源代码的所见即所得文字编辑器。它志于轻量化，不需要太复杂的安装步骤即可使用，且不必在客户端进行任何方式的安装。在所有的在线编辑器中，FCKeditor属于目前互联网上最好的编辑器之列，它功能强大，支持多种浏览器，无平台限制，可以和ASP.NET、ASP、JSP、PHP等多种Web语言融合，多语言支持，开放源码，扩展方便，加载速度快等。
2 自动隐藏在线多编辑器的需求
笔者开发一套英语自主学习平台（http://www.gzjzes.net）时选择了FCKeditor在线编辑器。在该平台中，多处需要使用在线文本编辑器，尤其是教师用户往题库中增加题目时，需要多个文本框供教师输入题目的相关信息，如：题目内容、注释、答案、解答过程等等。为了用户界面的友好以及使用方便，这些文本框都采用所见即所得的方式，即需要为每个文本框注册FCKeditor编辑器，然后由于需要的文本框较多，这就会影响页面的加载速度，而且也会因为每个文本框都有工具栏使得页面变得较复杂，用户使用时也不方便，如图1。
图2 能自动隐藏工具栏的编辑器
＜script type="text/javascript"＞
＜!--
var g_sCurrEditor = "";//全局变量，记录当前获得焦点的编辑器名称
function FCKeditor_OnComplete( editorInstance ) {
//设置编辑器获得焦点的响应函数
editorInstance.EditorDocument.body.onfocus =
function(){ focusChange( editorInstance.Name ); };
}
function focusChange( sInstanceName ) {
if( g_sCurrEditor !=sInstanceName ) {
var oEditor = FCKeditorAPI.GetInstance( sInstanceName );
oEditor.ToolbarSet.Expand();//展开工具栏
if( g_sCurrEditor != "" ){
var oEditor = FCKeditorAPI.GetInstance( g_sCurrEditor );
oEditor.ToolbarSet.Collapse();//关闭g_sCurrEditor的工具栏
}
g_sCurrEditor = sInstanceName;
}}
--＞
＜/script＞
在函数FCKeditor_OnComplete中设置编辑器获得焦点的响应函数，使得编辑器获得焦点时就调用自定义函数focusChange。在函数focusChange中，首先判断通过全局变量g_sCurrEditor记录的当前活动编辑器与正获得焦点的编辑器sInstanceName是否相同，如果不同，则展开编辑器sInstanceName的工具栏，然后通过编辑器的名称g_sCurrEditor 与FCKeditor的API函数GetInstance获得当前活动编辑器g_sCurrEditor的对象，通过对象则很容易让其工具栏隐藏起来，最后修改当前活动编辑器名称，即对变量g_sCurrEditor赋值。
加入上面代码后，则可为任意页面实现自动隐藏编辑器功能，只需要在设计好页面后直接注册编辑器，图2中的页面注册代码如下：
＜script type="text/javascript"＞
＜!--
//初始化控件
g_sCurrEditor = "ta_note";
RegistFCKeditorEX( "ta_passage", 120, false );
RegistFCKeditorEX( "ta_note", 120, true);
RegistFCKeditorEX( "ta_content", 120, false );
RegistFCKeditorEX( "ta_answer", 120, false );
RegistFCKeditorEX( "ta_process", 120, false );
// RegistFCKeditorEX为笔者自定义函数，以方便注册编辑器
…
＜/script＞
5 小结
在线编辑器的需求在网站建设中几乎是必备的，而对于某些需输入较多数据的网站，往往会需要多个文本编辑器，对此为了能加快页面加载速度、方便用户使用及界面的友好性，笔者提供的一种能自动隐藏工具栏的方法，该方法简单有效，提供的实现代码可移植性非常好，另外基于这种设计原理，对于其他在线编辑器也可进行相似的设计，达到自动隐藏的目的。读者可在此原理及实现上根据需要改动代码，以达到不同的效果，满足各种不同需求，如某些文本框需要自动隐藏而其他一直显示等。文章没有介绍如何使用FCKeditor，有兴趣的读者可在网上查阅，这方面的内容很多。
参考文献：
[1] FCKeditor官方网[EB/OL].http://www.fckeditor.net.
[2] 刘洪伟, 魏振钢.一个网页在线发布系统的设计与实现[J].计算机应用研究,2002，19(3)：143-144.
关键词：在线文本编辑器；FCKeditor；自动隐藏
中图分类号：TP311文献标识码：A文章编号：1009-3044(2008)24-1198-02
The Design of Multiply Text Editor for Internet Based on FCKeditor
RAO Yong-sheng1, WANG Ying2
(1.Institute of Educational Software, Guangzhou University, Guangzhou 510006, China; 2.South China Institute of Software Engineering, Guangzhou 510006, China)
Abstract: This article introduces the design theory of auto-hide about the editor for internet based on FCKeditor. And give the primary codes which make the online editor be auto-hiding. This method is simply, effective, and with good translated and expansibility. Based on this theory, we can do similar things to other online editor.
Key words: the text editor; FCKeditor; auto-hide
在建设具有交互性网站时，都允许用户输入数据，如发表评论、新增主题、发送信息等，而如今所输入的数据所包含的不仅仅是文本信息，还包括图片、链接、FLASH，甚至音频和视频等，这就不是HTML提供的TEXT或TEXTAREA所能完成的，一般的开发者都会使用第三方的在线编辑器来实现，这样对开发者和用户都极为方便。第三方的在线编辑器有很多，FCKeditor是其中一个使用较多、免费的编辑器。
1 FCKeditor简介
FCKeditor（FCKeditor主页：http://www.fckeditor.net）是一个专门使用在网页上属于开放源代码的所见即所得文字编辑器。它志于轻量化，不需要太复杂的安装步骤即可使用，且不必在客户端进行任何方式的安装。在所有的在线编辑器中，FCKeditor属于目前互联网上最好的编辑器之列，它功能强大，支持多种浏览器，无平台限制，可以和ASP.NET、ASP、JSP、PHP等多种Web语言融合，多语言支持，开放源码，扩展方便，加载速度快等。
2 自动隐藏在线多编辑器的需求
笔者开发一套英语自主学习平台（http://www.gzjzes.net）时选择了FCKeditor在线编辑器。在该平台中，多处需要使用在线文本编辑器，尤其是教师用户往题库中增加题目时，需要多个文本框供教师输入题目的相关信息，如：题目内容、注释、答案、解答过程等等。为了用户界面的友好以及使用方便，这些文本框都采用所见即所得的方式，即需要为每个文本框注册FCKeditor编辑器，然后由于需要的文本框较多，这就会影响页面的加载速度，而且也会因为每个文本框都有工具栏使得页面变得较复杂，用户使用时也不方便，如图1。
图2 能自动隐藏工具栏的编辑器
＜script type="text/javascript"＞
＜!--
var g_sCurrEditor = "";//全局变量，记录当前获得焦点的编辑器名称
function FCKeditor_OnComplete( editorInstance ) {
//设置编辑器获得焦点的响应函数
editorInstance.EditorDocument.body.onfocus =
function(){ focusChange( editorInstance.Name ); };
}
function focusChange( sInstanceName ) {
if( g_sCurrEditor !=sInstanceName ) {
var oEditor = FCKeditorAPI.GetInstance( sInstanceName );
oEditor.ToolbarSet.Expand();//展开工具栏
if( g_sCurrEditor != "" ){
var oEditor = FCKeditorAPI.GetInstance( g_sCurrEditor );
oEditor.ToolbarSet.Collapse();//关闭g_sCurrEditor的工具栏
}
g_sCurrEditor = sInstanceName;
}}
--＞
＜/script＞
在函数FCKeditor_OnComplete中设置编辑器获得焦点的响应函数，使得编辑器获得焦点时就调用自定义函数focusChange。在函数focusChange中，首先判断通过全局变量g_sCurrEditor记录的当前活动编辑器与正获得焦点的编辑器sInstanceName是否相同，如果不同，则展开编辑器sInstanceName的工具栏，然后通过编辑器的名称g_sCurrEditor 与FCKeditor的API函数GetInstance获得当前活动编辑器g_sCurrEditor的对象，通过对象则很容易让其工具栏隐藏起来，最后修改当前活动编辑器名称，即对变量g_sCurrEditor赋值。
加入上面代码后，则可为任意页面实现自动隐藏编辑器功能，只需要在设计好页面后直接注册编辑器，图2中的页面注册代码如下：
＜script type="text/javascript"＞
＜!--
//初始化控件
g_sCurrEditor = "ta_note";
RegistFCKeditorEX( "ta_passage", 120, false );
RegistFCKeditorEX( "ta_note", 120, true);
RegistFCKeditorEX( "ta_content", 120, false );
RegistFCKeditorEX( "ta_answer", 120, false );
RegistFCKeditorEX( "ta_process", 120, false );
// RegistFCKeditorEX为笔者自定义函数，以方便注册编辑器
…
＜/script＞
5 小结
在线编辑器的需求在网站建设中几乎是必备的，而对于某些需输入较多数据的网站，往往会需要多个文本编辑器，对此为了能加快页面加载速度、方便用户使用及界面的友好性，笔者提供的一种能自动隐藏工具栏的方法，该方法简单有效，提供的实现代码可移植性非常好，另外基于这种设计原理，对于其他在线编辑器也可进行相似的设计，达到自动隐藏的目的。读者可在此原理及实现上根据需要改动代码，以达到不同的效果，满足各种不同需求，如某些文本框需要自动隐藏而其他一直显示等。文章没有介绍如何使用FCKeditor，有兴趣的读者可在网上查阅，这方面的内容很多。
参考文献：
[1] FCKeditor官方网[EB/OL].http://www.fckeditor.net.
[2] 刘洪伟, 魏振钢.一个网页在线发布系统的设计与实现[J].计算机应用研究,2002，19(3)：143-144.