CKEditor与CKFinder整合并实现文件上传功能

最新推荐文章于 2024-03-20 17:26:00 发布

lvdong5830

最新推荐文章于 2024-03-20 17:26:00 发布

阅读量262

点赞数

分类专栏： java 文章标签： java web.xml 开发工具

本文链接：https://blog.csdn.net/lvdong5830/article/details/84132899

版权

java 专栏收录该内容

78 篇文章 0 订阅

订阅专栏

CKEditor与CKFinder整合并实现文件上传功能

一．需要的资源：

a) ckeditor_3.6.2 （解压）

b) ckeditor-java-3.6.2 （解压）

c) ckfinder_java_2.1 （解压）

二．执行步骤：

1.MyEclipse新建Web Project：CKEditor_Finder

2.复制以下文件夹到WebRoot下面：

ckfinder_java_2.1\ckfinder\CKFinderJava\ckfinder

注意：CKFinder加粗的是war包解压后的文件夹的名称

ckeditor_3.6.2/ckeditor

3.复制CKFinder配置文件到WEB-INF下面：

ckfinder_java_2.1\ckfinder\CKFinderJava\WEB-INF\config.xml

4.复制下面文件夹下面所有jar文件到WEB-INf/lib下面：

ckfinder_java_2.1\ckfinder\CKFinderJava\WEB-INF\lib

ckeditor-java-3.6.2\WEB-INF\lib

三．下面删除无用的文件

首先是ckeditor下面的文件：

_sample,_source, CHANGES.html，ckeditor_php4.php， ckeditor_php5.php,

ckeditor.asp, ckeditor.pack, INSTALL.html, LICENSE.html

然后是ckfinder下面的文件：

_samples, help, changelog.txt, install.txt, license.txt, translation.txt

四．修改配置文件config.xml

<baseURL>/CKEditor_Finder/userfiles/</baseURL>

五．在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>

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

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

</url-pattern>

</filter-mapping>

<session-config>

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

</session-config>

六.修改ckeditor/config.js文件的内容

CKEDITOR.editorConfig = function(config) {

config.filebrowserBrowseUrl = '/CKEditor_Finder/ckfinder/ckfinder.html';

config.filebrowserImageBrowseUrl = '/CKEditor_Finder/ckfinder/ckfinder.html?type=Images';

config.filebrowserFlashBrowseUrl = '/CKEditor_Finder/ckfinder/ckfinder.html?type=Flash';

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

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

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

// config.filebrowserWindowWidth = '1000';

// config.filebrowserWindowHeight = '700';

config.language = "zh-cn";

};

七．修改index.jsp文件的内容如下：

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

<%@ taglib uri="http://ckfinder.com" prefix="ckfinder" %>

<%@ taglib uri="http://ckeditor.com" prefix="ckeditor" %>

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>

</head>

<body>

<%--<ckfinder:ckfinder basePath="/CKFinderJava_0100/ckfinder/" width="700" height="500" /> --%>

</form>

<ckfinder:setupCKEditor basePath="/CKEditor_Finder/ckfinder/" editor="editor1" />

<ckeditor:replace replace="editor1" basePath="/CKEditor_Finder/ckeditor/" />

</body>

</html>

http://localhost/CKEditor_Finder/

关于破解：

替换方框的文字为：预览图片的位置。

要替换的文件的位置：/CKEditor_Finder/WebRoot/ckeditor/plugins/image/dialogs/image.js

Ckfinder.js文件的修改：

1.CKEditer/config.js文件大括号最后添加：

config.image_previewText = "预览图片的位置！自己修改！！ ";

2.return a.bF.length > 0 && A.indexOf(a.bF.substr(0, 9)) != -1 改为return false;

3.注释这一部分，这样，在上传一中图片之后，中间就不会有提示了

/*if (!S && (!p || a.bs.indexOf(p) % 8 < 4)) {

P.mj = J;

S = 1;

}

if ((P.eu && !T || S) && P.mj) { Q.addClass('files_message'); this.tools.of().setHtml(P.mj);

}*/

4.注释掉这个部分：这样，左下角的东西就看不见了

/*if (!B)this.dV().getChild(0).appendHtml(y || z || w != 4 ? r: s+ "\074\x62\x3e"+i.htmlEncode(a.ed)+"\074\057\x62\076\074\x2f\x64\151\x76\x3e");*/

lvdong5830

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CKEditor与CKFinder整合并实现文件上传功能

CKEditor与CKFinder整合并实现文件上传功能一．需要的资源：a) ckeditor_3.6.2 （解压）b) ckeditor-java-3.6.2 （解压）c) ckfinder_java_2.1 （解压）二．执行步骤：1.MyEclipse新建Web Project：CKEditor_Finder2.复制以下文件夹到WebRoot下面：ckfi...
复制链接

扫一扫