Fckeditor是一款开源的网络编辑器，功能类似与word，可以录入文字，设置文字样式；插入图片，flash，视频等等。例如：很多论坛中发言或者回复的编辑器，几乎都是fckeditoror。下面，将从网络编辑器的原理，编码结构，配置，如何使用几个角度进行详细的介绍。
一、 网络编辑器的原理
首先，编辑器大家都是熟知的，例如word软件，就是一款编辑器，菜单条区域提供了各种功能，编辑区域可以在其中录入文字，设置文字格式，插入图片，复制粘贴剪贴等，即支持键盘快捷键操作，也支持鼠标右键功能操作。所谓的网络编辑器，无非就是嵌在网页上的编辑器，例如下图：
网络编辑器与普通的编辑器软件类似，也是分为了3个区域：
菜单条区域：即上面红色框框内的部分，提供了各种功能键按钮，例如：源代码，保存，打印，复制，粘贴，设置字体格式，插入图片，flash等等。支持常用的各个功能。当点击各个功能按钮的时候，便会触发各个按钮的onclick事件处理。
编辑区域：即上图中中间绿色框框内的部分，这里通过iframe嵌入了一个网页（简称该网页为A），网页A支持普通网页的所有功能，可以复制粘贴，同时，由于网页A是可编辑的（平时大家看到的网页都是不可编辑的，可编辑是html的一个属性，是可以设置的），支持剪切，录入文字，并可以通过js获得当前光标所在具体位置。
和普通编辑器区别的地方：如果要插入图片，flash，视频等非文本资源，需要通过菜单条区域提供的相关功能按钮实现；即：需要先将该资源上传到资源库，然后再从资源库中选择资源插入到编辑区域中。
Sumit按钮：点击提交form表单按钮，提交后，将会处理编辑区域的资源，做相关的保存预览处理。
鼠标右键：当点击鼠标右键时候，会弹出快捷菜单，每个快捷菜单的单击事件处理，也是通过预先设置好得js事件监听处理方法处理的。
键盘快捷键处理：当使用了键盘快捷键的时候，例如ctrl+其他字母组合，会触发相应的快捷事件处理；该事件处理也是由事先设置好的js键盘事件监听方法进行处理，以响应用户的请求。
总之，网络编辑器的基础就是html和js。例如：菜单条，鼠标右键，键盘快捷键该三类的事件处理，都是通过js的注册事件监听来实现。菜单条是通过注册按钮的onclick事件处理实现；鼠标右键是通过注册鼠标的onmousexxx事件处理来实现；键盘快捷键也是同样的通过注册键盘onkeyxxx事件监听来实现。当触发事件的时候，就会调用之前注册的处理方法，处理来响应用户的动作。而编辑区域的录入文字则纯粹的是通过html的document可编辑属性来实现。
下面，附上最简单的网页编辑代码，不含菜单条区域不含js任何事件处理。
<html>
<head>
<title>My JSP 'testeditable.jsp' starting page</title>
<script>
window.οnlοad=function a(){
document.body.disabled = true;
document.body.contentEditable = true;
document.body.removeAttribute("disabled");
}
</script>
</head>
<body width=800 height=600 border="1">
This is my JSP page. <br>
</body>
</html>
通过设置document.body元素的属性，实现网页的可编辑性。这个代码的效果仅仅是可以让该网页可编辑，但是由于没有添加任何的js监听，不支持键盘快捷键，鼠标右键等功能菜单（操作系统约定俗称的除外，例如ctrl+c表示复制）。也不支持粘贴图片，粘贴后，直接出现一空白。
二、 Fckeditor编辑器-------开源项目介绍
目前，各个网站论坛博客空间使用的网络编辑器，普遍采用了开源的fckeditor编辑器；例如上面给出的图，就是fckeditor编辑器。该开源项目的网址在：http://ckeditor.com/。正如我上面分析的，编辑器的本质就是html和js，所以该编辑器可以在各种语言中使用，例如：java，.net。
该编辑器提供的功能：如上图所示：常用的功能几乎都包括；与word相比，也是一直让使用者不习惯的就是，在图片插入的时候，不能够直接复制粘贴到编辑区。
三、 Fckeditor编辑器-------如何使用
1、 下载相应的包
要使用编辑器，需要先到官网下载对应版本对应语言的fckeditor包。目前，我下载的是fckeditor主包FCKeditor_2.6.6.zip，以及对应的java集成jar包fckeditor-java-2.6-bin.zip。
2、 项目配置
1) 在eclipse中建立web project，然后将FCKeditor_2.6.6.zip解压缩后的fckeditor文件夹放在webroot目录下。该包包含了大量的js和html，是fckeditor的核心内容。
2) 将java集成包解压后的fckeditor-java-core-2.6.jar文件，放在lib下，该jar包主要是java集成的相关内容。
3) 配置web.xml，主要用来定义处理上传（图片，flash，视频等）的servlet，具体的配置可以参考附件。
4) 到此步为止，编辑器的基本配置完成，可以使用了。但是如果想就编辑器做一些配置，例如设置默认语言是en,zh_cn，或者设置菜单工具条区域的按钮内容，都可以通过修改配置文件完成，提供了两个主要的配置文件：fckeditor.properties和fckconfig.js。下面，将具体介绍该两个配置文件内容。
3、 Fckeditor配置文件
Ø Default.properties
在fckeditor-java-core-2.6.jar包中有一个默认的配置文件，default.properties。该配置文件中包含了有关编辑器的一些配置，包括：用户上传权限处理类，允许上传的资源后缀名，上传资源的路径，编辑器的根路径，编辑器的高度宽度等，具体可以参考附件中的default.properties文件。该配置文件作为默认的配置，放在jar包中。
当用户在类路径class目录下定义了fckeditor.properties文件，那么将用该配置文件中的配置项覆盖default.properties中的重复部分。如果用户没有定义fckeditor.properties，那么将默认使用default.properties文件中的内容。而fckeditor.properties文件中的配置选项是default的子集，可以根据需要配置覆盖某些默认设置。
Ø Fckconfig.js
该配置以js的形式出现，主要用于编辑器功能方面的设置，包括：菜单条区域按钮（可以设置全集或者子集），键盘快捷键组合，上传文件的后缀，处理url，编辑器主题样式地址等。
在使用编辑器的时候，无论是通过直接编写html代码还是通过java生成，都有一项是设置fckeditor.config属性。那么所设置的属性将覆盖fckconfig.js中的同类属性值。如果用户没有单独的设置config属性，那么默认将使用fckconfig.js中的内容。
4、 编码入口
使用该开源编辑器，有三种方式，分别是：
Ø java代码生成new fckeditor()，创建一个编辑器类的对象，并设置该对象的各种属性（即fckconfig.js中的子集），一个对象表示一个编辑器；
Ø 使用fck标签，通过fck标签方式引入fck编辑器；
Ø 使用js方式，引用开源包带的fckeditor.js文件，new fckeditor(),js对象方式；并可同样的，通过js方式设置该编辑器对象的config属性。
以上三种方式，其最终都会生成如下结果的html代码，例子：
<input type=“hidden” name=“编辑器实例的名字（fckeditorinstance name）” value=“编辑区域中初始的值” id=“编辑器实例的名字（fckeditorinstance name）” >
<input type=“hidden” id=“编辑器实例的名字_Config”name=“和id同值” type="hidden" value="SkinPath=skins%2Fsilver%2F" >
<iframe id=“编辑器实例名字__Frame”height=“800”weight=“100%”scroll=“no” src=“/FCKEditor/fckeditor/editor/fckeditor.html?InstanceName=编辑器实例名字（同上）&Toolbar=Default”></iframe>
下面分析上述代码，首先第一个input元素，表示的编辑器编辑区域中的源码内容。在最开始初始化编辑器的时候，用于根据该元素的值设置编辑区域内容；最点击提交保存时候，用于将编辑区域中的源码格式的内容赋值给该元素。然后，在处理表单提交时候，就可以通过request.getparameter(“该元素的id”)获取编辑区域内容。
第二个input元素，表示config内容，用于在编辑器初始化时候，设置编辑器的属性。
第三个iframe元素，表示要嵌入的编辑器主题html，带有参数编辑器名字以及工具条设置。
5、 其他
未完，见fckeditor学习心得（二）
424
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
