FCKEditor使用、修改源代码经验总结

FCKEditor使用、修改源代码经验总结

作者:刘岩

Email[email protected]

前言:

废话不多说了,搞过web开发的人大概都知道FCKeditor是做为在线HTML编辑器的,类似于word的编辑试图和展现方式,实际上幕后依然是转成了HTML脚本的。因为笔者使用的是Java语言,所以开发环境也是基于JavaIDE,其他语言的版本的集成和使用请查阅google。在使用fck中会遇到一些问题,大家需要修改一下它的源代码(还好它是开源的)才能解决。

下载:

从网站http://sourceforge.net/projects/fckeditor/files/FCKeditor.Java/2.4.1/下载压缩包,和源代码包src(内涵源代码,版本因人而异,个人觉得2.4.1足够了)

在自己的项目中使用FCKeditor

1.在自己的web项目中添加一下jar

 

/FCKDemo/WebRoot/WEB-INF/lib/commons-fileupload-1.2.1.jar

/FCKDemo/WebRoot/WEB-INF/lib/commons-io-1.3.2.jar

/FCKDemo/WebRoot/WEB-INF/lib/slf4j-api-1.5.2.jar

/FCKDemo/WebRoot/WEB-INF/lib/slf4j-simple-1.5.2.jar

/FCKDemo/WebRoot/WEB-INF/lib/java-core-2.4.1.jar

其中java-core-2.4.1.jarfck自己的java程序原包、里面包含了fck的核心servlet和一些辅助util处理类。它在fckeditor-java-2.4.1-bin.zip的根目录下面。commons-fileupload-1.2.1.jarcommons-io-1.3.2.jarslf4j-api-1.5.2.jarfckeditor-java-2.4.1-bin.ziplib下面,而slf4j-simple-1.5.2.jar需要读者自己从网上下载。

2.在您的web项目src下面添加fckeditor.properties文件,内容如下

 

connector.userFilesPath=/UserUploadFile

connector.resourceType.file.extensions.allowed=|jpg|gif|png|rar|zip|txt|doc|wma|wmv|mp3|flv|swf|

connector.resourceType.media.extensions.allowed=|wma|wmv|mp3|flv|swf|

connector.resourceType.image.extensions.allowed=|jpg|png|gif|

connector.resourceType.flash.extensions.allowed=|swf|

connector.userActionImpl=net.fckeditor.requestcycle.impl.UserActionImpl

fckeditor.basePath = /fckeditor

fckeditor.skinPath =/skins/silver/

配置文件里面的配置相信聪明的您一看英文就知道什么意思了,虽然笔者英语很差,但是也大概知道配置的大致意思。

3.引入fckeditorjavascript文件

把您下载的源码包fckeditor-java-2.4.1-src.zip中的

fckeditor-java-2.4.1-src.zip\fckeditor-java-2.4.1\java-demo\src\main\webapp下的fckeditor文件夹解压后整个拷贝到您的页面文件夹下。并且与fckeditor文件夹同级建立一个叫做UserUploadFile的文件夹用于存储用户上传的文件。

4.加入fckservlet

修改web.xml,内容如下

 

    <!—FCKservlet-->

    <servlet>

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

       <servlet-class> net.fckeditor.connector.ConnectorServlet </servlet-class>

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

    </servlet>

    <servlet-mapping>

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

       <url-pattern> /fckeditor/editor/filemanager/connectors/* </url-pattern>

    </servlet-mapping>

OK,完成以上步骤,基本上就把FCKEditor加入到您的web项目中了。

下面我们来写个JSP页面测试一下效果

新建一个JSP页面form.jsp,内容如下:

 

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

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

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

    <head>

 

       <title>测试FCK页面 by-素还真</title>

       <meta http-equiv="pragma" content="no-cache">

       <meta http-equiv="cache-control" content="no-cache">

       <meta http-equiv="expires" content="0">

       <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

       <meta http-equiv="description" content="This is my page">

       <!--

    <link rel="stylesheet" type="text/css" href="styles.css">

    -->

    </head>

 

    <body>

       <table width="886" height="345" border="0" cellpadding="0"

           cellspacing="0">

           <tr>

              <td>

                  <form action="result.jsp" method="post">

                     <FCK:editor instanceName="content" height="345">

                         <jsp:attribute name="value">

                  </jsp:attribute>

                     </FCK:editor>

                     <input type="submit" value="提交">

                  </form>

              </td>

           </tr>

       </table>

 

    </body>

</html>

在新建一个显示页面result.jsp,内容如下

 

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<%

    String content = request.getParameter("content");

 

    content = new String(content.getBytes("iso-8859-1"), "UTF-8");

 

    System.out.println("---------------------");

    out.println(content);

    System.out.println("---------------------");

%>


启动web服务器,打开IE输入url :http://127.0.0.1:8080/FCKDemo/form.jsp,效果如下:
FCKEditor使用、修改源代码经验总结
编辑一下,上传一张图片试试,效果如下

FCKEditor使用、修改源代码经验总结

提交后显示如下

FCKEditor使用、修改源代码经验总结 

你可能感兴趣的:(java,jsp,Web,servlet,fckeditor)