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

使用帮助

网站整合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"%>









 

  

    
新闻
    

  
  

    

    

  
 

  

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("");
		out.println("");
		out.println("");
		out.println("");
		out.println(content);
		out.println("");
		out.println("");
		out.close();
	}

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

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