CKEditor整合CKFinder.doc的使用实现富文本编辑器的整合使用

最新推荐文章于 2025-06-05 12:30:15 发布

原创最新推荐文章于 2025-06-05 12:30:15 发布 · 500 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#java #ckeditor #ckfinder

富文本编辑器专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何将CKEditor与CKFinder在Java环境下进行整合。首先从官方网站下载CKEditor和CKFinder的相应版本，然后分别将CKEditor的文件放入Web项目目录，创建并配置index.jsp。接着整合CKFinder，包括引入文件、修改config.xml中的baseURL、拷贝jar包、更新web.xml以及编辑config.js。最后通过简单的servlet页面完成整合。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用帮助

网站整合CKEditor和CKFinder(Java版)

1.1 下载CKEditor:

在 https://ckeditor.com/ckeditor-4/download/，可以下载到各种版本的CKEditor，包括完整版full、标准版standard、基础版basic等。同时也可定制的下载，可以选择Toolbar类型、插件、语言等。这里下载的是ckeditor_4.7.3_full.zip。

1.2 下载CKFinder:

在 https://ckeditor.com/ckeditor-4/download/#ckfinder页面，可以下载到各种版本的CKFinder。仍然选择java版。这里我们下载的是2.6.2.1版本，下载后得到ckfinder_java_2.6.2.1.zip。

2、整合ckeditor

首先做的是整合ckeditor。解压下载的ckeditor_4.7.3_full.zip，当然你也可以选择其他的版本。

注意啦！把ckeditor_4.7.3_full文件夹下的ckeditor复制到你的web项目根目录，即Eclipse的WebContent文件夹下面

创建index.jsp文件，引入ckedit.js文件，并添加textarea标签。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
</head>
<body>
<form action="news.do" method="post">
 <table>
  <tr>
    <td>新闻</td>
    <td><textarea rows="5" cols="30" name="myeditor"></textarea></td>
  </tr>
  <tr>
    <td></td>
    <td><input type="submit" value="提交"></td>
  </tr>
 </table>
</form>
  <script type="text/javascript">
    var editor=CKEDITOR.replace("myeditor");
  </script>
</body>
</html>

3、整合ckfinder

3.1引入ckfinder
解压ckfinder_java_2.6.2.1.zip，在文件夹中找到CKFinderJava-2.6.2.1文件夹中的ckfindder复制到你的webContent，项目根目录下

3.2 在CKFinderJava-2.6.2.1文件夹中的WEF-INF里的config.xml复制到项目的WEF-INF目录下，并打开修改

图中红色区域，其中baseURL根据项目的上下文路径进行设置，路径中的userfiles可以不动。

3.3 把CKFinderJava-2.6.2.1文件夹中的WEF-INF里的lib目录下的所有jar包全部复制到项目里的lib目录下。

3.4把CKFinderJava-2.6.2.1文件夹中的WEF-INF里的web-xml里的内容复制到项目的web-xml文件里，并根据需求进行改进。

3.5 最后，打开项目里ckeditor下的config.js文件的function(config{})里面

写上这部分内容，当然url需要按照需求修改。后面3个的url参照web.xml中指定监听器映射的URL，因为其指定的java是在文件系统中找不到的

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

config.filebrowserImageBrowseUrl ='ckfinder/ckfinder.html?Type=Images';

config.filebrowserFlashBrowseUrl ='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';

本人的这次示例并没有对这段修改可以直接用。

最后配合简单的servlet页面完成示例：

@WebServlet("/news.do")
public class NewsServlet extends HttpServlet {

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		PrintWriter out=response.getWriter();
		String content=request.getParameter("myeditor");
		out.println("<!DOCTYPE html>");
		out.println("<html>");
		out.println("<head><title>新闻内容</title></head>");
		out.println("<body>");
		out.println(content);
		out.println("</body>");
		out.println("</html>");
		out.close();
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

本次示例到此结束，亲身体验无误！