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

来源：互联网发布：科学与认识的关系知乎编辑：程序博客网时间：2024/05/29 11:41

使用帮助

网站整合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);}

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

阅读全文

0 0