FCKeditor的使用

引：最近在做一个BLOG演示程序，用到了在线文本编辑器，以前一直用eWebEditor。后来发现FCKeditor是开源的，所以就转用这个了，这篇文章介绍了FCKeditor-2.4.3及FCKeditor.java-2.3.2的基本使用。

新发现：原来CSDN博客系统的在线文本编辑器用的也是FCKeditor。不过不太厚道，把人家的“关于”也去掉了.

 

一、FCKeditor介绍

FCKeditor 这个开源的HTML 文本编辑器可以让web 程序拥有如MS Word 这样强大的编辑功能。FCKeditor 支持当前流行的浏览器如IE 5.5+, Firefox 1.0+, Mozilla 1.3+与Netscape 7+等。基本上我们需要的编辑功能它都能够实现，包括粘贴word格式的文档，上传图片，设置图片与文字的各种格式，预览。最重要是它不但完全免费，而且是多国语言的，对中文的支持也非常好。

FCKeditor官方网址：http://www.fckeditor.net/。写此文档时的最新版本是2.4.3。下图中①为此开源包的主文件下载地址。

二、在JAVA项目中使用FCKeditor在线编辑器：

FCKeditor不能直接在JSP项目中使用，需要FCKeditor.java库的支持。FCKeditor.java是针对在JAVA中使用FCKeditor而开发的一套整合包(由Simone Chiaretta开发)。FCKeditor官方网址上提供了此包的下载，如上图②为此包的下载地址(当前最新版本是2.3)

1．  新建一个java web应用程序。

2． 解压FCKeditor_2.4.3.zip包：

将其中的 edit 文件夹挎贝到项目中的根目录下(下图中①)，将其中的 fckconfig.js、fckeditor.js、fckstyles.xml、fcktemplates.xml 文件也挎贝到项目中的根目录下(下图中②)。

3．  解压 FCKeditor.java-2.3.zip 包：

将其中的 \web\WEB-INF\lib 下的两个 jar 文件挎贝到项目的WEB-INF\lib 目录下(下图③)，把\src 下的 FCKeditor.tld 文件挎贝到项目的 WEB-INF目录下(下图④)。

4．  完成后的目录如下：

5．  上图⑤中的文件夹是为保存上传的图片、flash准备的。

6．  修改WEB-INF\web.xml文件：

加入FCKeditor的配置信息，如下：

<display-name>FCKeditor在线文本编辑器的使用配置</display-name>

    <servlet>

        <servlet-name>Connector</servlet-name>

        <servlet-class>

            com.fredck.FCKeditor.connector.ConnectorServlet

        </servlet-class>

        <init-param>

            <param-name>baseDir</param-name>

            <!-- 此为文件浏览路径 -->

            <param-value>/uploads/</param-value>

        </init-param>

        <init-param>

            <param-name>debug</param-name>

            <param-value>true</param-value>

        </init-param>

        <load-on-startup>1</load-on-startup>

    </servlet>

    <servlet>

        <servlet-name>SimpleUploader</servlet-name>

        <servlet-class>

            com.fredck.FCKeditor.uploader.SimpleUploaderServlet

        </servlet-class>

        <init-param>

            <param-name>baseDir</param-name>

        <!-- 此为文件上传路径，需要在WebRoot 目录下新建 UserFiles 文件夹 -->

        <!-- 根据文件的类型还需要新建相关的文件夹 Image、Flash -->

            <param-value>/uploads/</param-value>

        </init-param>

        <init-param>

            <param-name>debug</param-name>

            <param-value>true</param-value>

        </init-param>

        <init-param>

            <!-- 此参数为是否开启上传功能 -->

            <param-name>enabled</param-name>

            <param-value>true</param-value>

        </init-param>

        <init-param>

            <param-name>AllowedExtensionsFile</param-name>

            <param-value></param-value>

        </init-param>

        <init-param>

            <!-- 此参数为文件过滤，以下的文件类型都不可以上传 -->

            <param-name>DeniedExtensionsFile</param-name>

            <param-value>       php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgi

            </param-value>

        </init-param>

        <init-param>

            <param-name>AllowedExtensionsImage</param-name>

            <param-value>jpg|gif|jpeg|png|bmp</param-value>

        </init-param>

        <init-param>

            <param-name>DeniedExtensionsImage</param-name>

            <param-value></param-value>

        </init-param>

        <init-param>

            <param-name>AllowedExtensionsFlash</param-name>

            <param-value>swf|fla</param-value>

        </init-param>

        <init-param>

            <param-name>DeniedExtensionsFlash</param-name>

            <param-value></param-value>

        </init-param>

        <load-on-startup>1</load-on-startup>

    </servlet>

    <servlet-mapping>

        <servlet-name>Connector</servlet-name>

        <url-pattern>

        /editor/filemanager/browser/default/connectors/jsp/connector

        </url-pattern>

    </servlet-mapping>

    <servlet-mapping>

        <servlet-name>SimpleUploader</servlet-name>

        <url-pattern>

            /editor/filemanager/upload/simpleuploader

        </url-pattern>

    </servlet-mapping>

      

7．  在需使用FCKeditor的jsp页面中加入：

// 文件开头处加入

<%@ taglib uri="http://fckeditor.net/tags-fckeditor" prefix="FCK" %>

//要使用的地方加入(id=”content”为此组件的标识)

<FCK:editor id="content" basePath="/你的web应用程序名/"

imageBrowserURL="/你的web应用程序名/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"

linkBrowserURL="/你的web应用程序名/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"

flashBrowserURL="/你的web应用程序名/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"

imageUploadURL="/你的web应用程序名/editor/filemanager/upload/simpleuploader?Type=Image"

linkUploadURL="/你的web应用程序名/editor/filemanager/upload/simpleuploader?Type=File"

flashUploadURL="/你的web应用程序名editor/filemanager/upload/simpleuploader?Type=Flash"> </FCK:editor>

在java web程序中要获取此编辑器中编辑好的文本就用以下代码：

//注意这个"content"就是在<FCK:editor>中设置的id。

request.getParameter("content");

              另外，此标签的几个较常用的属性(其它属性的使用可看tld文件)：

l         width="100%" ：宽度,默认值为100%

l         height="200"：高度,默认值是200

l         skinPath="skins/default/"：工具条的皮肤。除了默认值，还有这两个值：skins/silver/和skins/office2003。

l         toolbarSet="Default"：工具集名称，即出现在页面上的工具条上的工具按钮，参考fckconfig.js，默认值是Default。默认的工具集中很多的工具条都用不上。可以在fckconfig.js中添加自定义的工具集，如下：

FCKConfig.ToolbarSets["qiujyDefault"] = [

    ['Source','Templates'],

    ['Cut','Copy','Paste','PasteText','PasteWord'],

    ['Find','Replace','-','SelectAll','RemoveFormat','Table'],

    ['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript','-','Outdent','Indent'],

    ['OrderedList','UnorderedList','JustifyLeft','JustifyCenter','JustifyRight','Link','Unlink'],

    ['TextColor','BGColor'],

    ['Image','Flash','Rule','Smiley','-','Form','Checkbox','Radio','TextField','Textarea','Select','Button','-','About'],

    ['Style','FontFormat','FontName','FontSize']

] ;

 

FCKConfig.ToolbarSets["qiujyBasic"] = [

    ['Bold','Italic','Underline','StrikeThrough','-','OrderedList','UnorderedList','Rule','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyFull','-','Link','Unlink','-','TextColor','BGColor','-','Smiley','About']

] ;

 

8．  给FCKeditor瘦瘦身：

l         将FCKeditor目录下及子目录下所有以“_”下划线开头的文件夹删除

l         还可以将editor/skins目录下的皮肤文件删除，只留下default一套皮肤（如果你不需要换皮肤的话）

l         还可以将editor/lang目录下文件删除，只保留en.js, zh-cn.js, zh.js文件（英文，简体中文，繁体中文一般应该够用了）

9．  安全问题：

假如在前台让普通用户也能使用FCKEditor，要注意相关安全问题。在前台使用时,不要使用默认的工具集，可用如上自定义的工具集qiujyBasic，即在jsp页面的<FCK:editor>上添加属性toolbarSet="qiujyBasic"。

评论

4 楼 itshu 2008-07-29  

它与struts2中整合的问题
能解决吗
谢谢

3 楼 鸭梨LTY 2008-05-11  

太谢谢您了 真细心啊 。。。 顶起 谢谢你的帮忙

2 楼 majianshe 2008-03-20  

，多谢

1 楼 hongfulover 2007-12-27  

正需要这个东东。写得很详细，谢谢了！