ckeditor+ckfinder java配置

SSH集成CKEditor和CKFinder

一、 本文档目的

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

二、 环境介绍

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

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

一、 集成过程

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个压缩文件。

1、 将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文件

1、 配置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'

};

 

2、 配置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.*"/>

 

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

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

1、 在前端页面调用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"><p>This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p></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代码的写法。

2、 部署项目并运行.

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

一、 优化

这里提供几篇本人觉得不错的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

使用说明：ckeditor一般采用在编辑页面嵌入iframe作为编辑区域，而文章显示页面往往会由一定的CSS文件进行样式控制，从而造成编辑器编辑时看到的文章与文章显示页面展示的文章在外观上有一定出入，“所见即所得”并未完美实现，这种可以通过ckeditor官网下载divarea插件，同时在编辑页面调用和文章显示页面一样的CSS文件，同时保证编辑器的<input>的id与文章显示页面内容区域的id一样，例如:编辑页面edit.jsp和文章显示页面页面article.jsp。

article.jsp中的<div id="content" >${content}</div>

edit.jsp中<input id="editor" />

此时需要content和editor共用相同的样式才能保证编辑器中的看到的就是展示页面的效果。

ckeditor插件下载方法:http://ckeditor.com/addons/plugins/all

自定义插件地址:http://ckeditor.com/builder