fckeditor学习心得（一）

qushaoyan

浏览: 7262 次
性别:
来自: 北京

最近访客更多访客>>

huhubinbin_

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2010-09 ( 5)
更多存档...

博客分类：

jsp and servlet

fckeditor Flash JSP HTML Eclipse

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>

window.onload=function a(){

document.body.disabled = true;

document.body.contentEditable = true;

document.body.removeAttribute("disabled");

}

</script>

</head>

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元素，表示的编辑器编辑区域中的源码内容。在最开始初始化编辑器的时候，用于根据该元素的值设置编辑区域内容；最点击提交保存时候，用于将编辑区域中的源码格式的内容赋值给该元素。然后，在处理表单提交时候，就可以通过request.getparameter(“该元素的id”)获取编辑区域内容。

第二个input元素，表示config内容，用于在编辑器初始化时候，设置编辑器的属性。

第三个iframe元素，表示要嵌入的编辑器主题html，带有参数编辑器名字以及工具条设置。

5、其他

未完，见fckeditor学习心得（二）