SSH集成CKEditor和CKFinder

最新推荐文章于 2022-05-09 15:13:38 发布

Jungle_King

最新推荐文章于 2022-05-09 15:13:38 发布

阅读量130

点赞数

本文链接：https://blog.csdn.net/yuehenmiss/article/details/102914712

版权

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个压缩文件。下载截图如下：

进入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文件做如下修改，其它为提到的基本不变：

<baseURL>/userfiles/</baseURL>

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

图1-5 修改config.xml文件

3、配置CKeditor

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

/**

* 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中加入如下在代码：

<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-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>

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

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>

其代码如下：

<%@ 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>

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

</script>

</script>

</head>

<body>

This is my JSP page.

<br>

<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>