SSH集成CKEditor和CKFinder

SSH集成CKEditor和CKFinder

1. 一、            本文档目的

最近接触一个网站信息发布系统。要实现在本地浏览器对系统服务器端的图片、flash、视频进行管理的功能。在查阅资料的过程中，找到了将ckeditor和ckfinder配合使用来实现该功能。这里主要是想给大家分享一下将ckeditor和ckfinder集成到SSH框架的配置过程以及在此过程中所遇到问题的解决方法。

1. 二、            环境介绍

本集成涉及的内容有：MyEclipse9.0M1、Struts2.1、Spring3.0、Hibernate3.3、ckeditor_3.6.4、ckfinder_java_2.2。

这里不细介绍SSH框架的搭建，把主要的精力放在已配好的SSH框架里整合ckeditor和ckfinder。

1. 三、            集成过程

1、下载ckeditor和ckfinder：

ckeditor下载地址为：http://ckeditor.com/download

ckfinder下载地址为：http://ckfinder.com/download

这里提醒一点：ckfinder一定得下载针对Java的。下载后你会得到：ckeditor_3.6.4.zip 和ckfinder_java_2. 2.zip 这2个压缩文件。下载截图如下：

进入ckeditor主页，点击Previous versions下的“View all”即可到如下界面。

图1-1 下载ckeditor-java-3.6.4.zip

图1-2 下载ckfinder_java_2. 2.zip

2、将ckeditor和ckfinder添加到项目中：

解压你下载的ckeditor_3.6.4.zip 和ckfinder_java_2.2.zip这2个压缩文件,将ckeditor_3.6.4目录下的ckeditor文件夹和ckfinder_java_2. 2目录下的ckfinder_java_2.2\ckfinder\_sources\CKFinder for Java\WebApp\src\

main\webapp目录下的ckfinder文件夹复制到你项目的Webroot根目录下的plugins目录下（自己建的，也可以不放刺目录下，但要注意以后配置的路径也要相应的改变）。结果如图：

图1-3 添加到项目

其次，还要将ckfinder_java_2.2\ckfinder\_sources\CKFinder for Java\WebApp\src\main\webapp\WEB-INF目录下的config.xml文件拷贝到项目的WEB-INF目录下，如图：

图1-4 拷贝config.xml文件

之后对config.xml文件做如下修改，其它为提到的基本不变：

<!-- 开启上传功能，如果为false为提示：因为安全原因，文件不可浏览. 请联系系统管理员并检查CKFinder配置文件.并且默认你是是为false的 -->

<enabled>true</enabled>

<!-- 文件存放的地址 /ckfinder/userfiles/ (自动创建，一般写成自己的项目名称就可以了) -->

<baseURL>/userfiles/</baseURL>

在本项目中的修改如下图：

图1-5 修改config.xml文件

3、配置CKeditor

在CKeditor目录下的config.js中添加如下代码：

/**

 * @license Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.

 * For licensing, see LICENSE.html or http://ckeditor.com/license

 */

 

CKEDITOR.editorConfig = function(config) {

    // Define changes to default configuration here. For example:

    // config.language = 'fr';

    // config.uiColor = '#AADC6E';

 

    //配置默认配置

    config.language = 'zh-cn'; //配置语言   

    //config.uiColor = '#FFF'; //背景颜色   

    // config.width = 400; //宽度   

    // config.height = 400; //高度   

    //config.skin = 'v2'; //编辑器皮肤样式  

    // 取消 “拖拽以改变尺寸”功能   

    // config.resize_enabled = false;   

    // 使用基础工具栏   

    // config.toolbar = "Basic";   

    // 使用全能工具栏   

    config.toolbar = "Full";

           //使用自定义工具栏   

           // config.toolbar =   

           // [   

           // ['Source', 'Preview', '-'],   

           // ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', ],   

           // ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],   

           // ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', SpecialChar','PageBreak'], 

           // '/',   

           // ['Bold', 'Italic', 'Underline', '-', 'Subscript', 'Superscript'],   

           // ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'],    

           // ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],   

           // ['Link', 'Unlink', 'Anchor'],   

           // '/',   

           // ['Format', 'Font', 'FontSize'],   

           // ['TextColor', 'BGColor'],   

           // ['Maximize', 'ShowBlocks', '-', 'About']   

           // ];  

           // 在 CKEditor 中集成 CKFinder注意 ckfinder 的路径选择要正确。  

           config.filebrowserBrowseUrl = 'plugins/ckfinder/ckfinder.html',

           config.filebrowserImageBrowseUrl = 'plugins/ckfinder/ckfinder.html?type=Images',

           config.filebrowserFlashBrowseUrl = 'plugins/ckfinder/ckfinder.html?type=Flash',

           config.filebrowserUploadUrl = 'plugins/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files',

           config.filebrowserImageUploadUrl = 'plugins/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images',

           config.filebrowserFlashUploadUrl = 'plugins/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash',

           config.filebrowserWindowWidth = '1000',

           config.filebrowserWindowHeight = '700'

};

4、配置CKFinder

在web.xml中加入如下在代码：

    <!-- CKFinder 配置开始 -->

    <servlet>

       <servlet-name>ConnectorServlet</servlet-name>

       <servlet-class>com.ckfinder.connector.ConnectorServlet</servlet-class>

       <init-param>

           <param-name>XMLConfig</param-name>

           <param-value>/WEB-INF/config.xml</param-value>

       </init-param>

       <init-param>

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

           <param-value>false</param-value>

       </init-param>

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

    </servlet>

    <servlet-mapping>

       <servlet-name>ConnectorServlet</servlet-name>

       <url-pattern>

           /plugins/ckfinder/core/connector/java/connector.java

       </url-pattern>

    </servlet-mapping>

    <filter>

       <filter-name>FileUploadFilter</filter-name>

       <filter-class>com.ckfinder.connector.FileUploadFilter</filter-class>

                <init-param>

                    <param-name>sessionCookieName</param-name>

                    <param-value>JSESSIONID</param-value>

                </init-param>

                <init-param>

                    <param-name>sessionParameterName</param-name>

                    <param-value>jsessionid</param-value>

                </init-param>

    </filter>

    <filter-mapping>

       <filter-name>FileUploadFilter</filter-name>

       <url-pattern>

           /plugins/ckfinder/core/connector/java/connector.java

         </url-pattern>

    </filter-mapping>

    <session-config>

       <session-timeout>10</session-timeout>

    </session-config>

<!-- CKFinder 配置结束 -->

注意：这里的配置的filter会和Struts的配置冲突，导致上传照片传不上去，此时需要在Struts.xml文件中加入如下代码：

    <!-- 解决Struts与CKfinder的 冲突 -->

    <!-- 表示对符合此正则表达式的URL，Struts不进行过滤，仅传递 -->

<constant name="struts.action.excludePattern" value="/plugins/ckfinder.*"/>

5、导入需要的jar包，放在lib目录下

将ckfinder_java_2.2\ckfinder 下的CKFinderJava.war的后缀名改为rar然后解压，之后将CKFinderJava\WEB-INF\lib中的这些jar包可拷到项目里。所需jar包如下图：

图1-6 需添加的JAR包

 

6、在前端页面调用CKeditor和CKFinder

在调用CKeditor和CKFinder首先要引入对应的JS文件。代码如下：

<script type="text/javascript" src="<%=path%>/plugins/ckeditor/ckeditor.js">

</script>

<script type="text/javascript" src="<%=path%>/plugins/ckfinder/ckfinder.js">

其代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>

<%

    String path = request.getContextPath();

    String basePath = request.getScheme() + "://"

            + request.getServerName() + ":" + request.getServerPort()

            + path + "/";

%>

 

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

<html>

    <head>

       <base href="<%=basePath%>">

 

       <title>My JSP 'index.jsp' starting page</title>

       <script type="text/javascript" src="<%=path%>/plugins/ckeditor/ckeditor.js">

</script>

       <script type="text/javascript" src="<%=path%>/plugins/ckfinder/ckfinder.js">

</script>

    </head>

 

    <body>

       This is my JSP page.

       <br>

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

           <textarea cols="100" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>

           <script type="text/javascript">

// This is a check for the CKEditor class. If not defined, the paths must be checked.

if (typeof CKEDITOR == 'undefined') {

    document

           .write('<strong><span style="color: #ff0000">Error</span>: CKEditor not found</strong>.'

                  + 'This sample assumes that CKEditor (not included with CKFinder) is installed in'

                  + 'the "/ckeditor/" path. If you have it installed in a different place, just edit'

                  + 'this file, changing the wrong paths in the <head> (line 5) and the "BasePath"'

                  + 'value (line 32).');

} else {

    var editor = CKEDITOR.replace('editor1');

    CKFinder.setupCKEditor(editor, '/ckfinder/');

    // It is also possible to pass an object with selected CKFinder properties as a second argument.

    // CKFinder.SetupCKEditor( editor, { BasePath : '../../', RememberLastFolder : false } ) ;

    }    

</script>

</form>

  </body>

</html>

注意：页面form、textarea以及其下的script代码的写法。

7、部署项目并运行：

图1-7 CKeditor界面

图1-8 添加图片

 

图1-9 CKFinder查看服务端上图片

 

 

图1-10 上传图片到服务端

 

图1-10 上传图片

 

图1-10 添加图片成功

 

图1-10 添加图片结果

 

至此，整个配置就完成了。并且配好了添加和上传图片的功能。

1. 四、            优化

这里提供几篇本人觉得不错的CKeditor和CKfinder的文章，供大家参考：

http://wenku.baidu.com/view/fbef31d0195f312b3169a5ff.html最后一部分讲了些优化的内容。

http://wenku.baidu.com/view/325896e8856a561252d36f85.htmlCKEditor 优化配置部分。

http://wenku.baidu.com/view/a9295562ddccda38376baf08.html

http://wenku.baidu.com/view/35dd86f1f61fb7360b4c651a.html