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

本文详细介绍了如何将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);
	}



本次示例到此结束,亲身体验无误!


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值