JSP使用ckeditor和ckfinder實現富文本及上傳功能

最後更新：2018-12-03 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

ckeditor環境搭建，請參考 JSP中使用CKEditor3.6入門教程
JSP頁面使用富文本控制項ckeditor提交表單資料

JSP頁面使用富文本控制項ckeditor自訂樣式

JSP使用ckeditor和ckfinder實現富文本及上傳功能源碼下載

一、下載
ckeditor為：http://ckeditor.com/download
ckfinder為：http://ckfinder.com/download

二、解壓你下載的ckeditor-java-x.x.zip 和ckfinder_java_x.x.zip這2個壓縮檔

將ckeditor-java-x.x.zip目錄下的ckeditor檔案夾和ckfinder_java_x.x.zip目錄下的 ckfinder_java_x.x\ckfinder\_sources\CKFinderfor_Java\WebApp\src\main\webapp\ckfinder複製到你項目的Webroot根目錄下

三、將你下載的2個檔案的lib目錄下的包全部複製到你項目的lib下面

四、ckfinder_java_x.x目錄下的 ckfinder_java_x.x\ckfinder\_sources\CKFinderfor Java\WebApp\src\main\webapp\WEB-INF目錄下的config.xml檔案複製到你項目的 Webroot\WEB-INF目錄下，然後config.xml:
將第一排的<enabled>false</enabled>改為<enabled>true</enabled>；
將第三行的 <baseURL>/code/upload/</baseURL>
（此處為你的上傳檔案存放路徑，修改成你根目錄下你想要存放的地方）此處我用的絕對路徑，其中code是項目的名稱，如果不這麼寫，上傳圖片擷取的路徑將是/upload/目錄，導致無法正常顯示圖片。

五、修改項目中的web.xml

<?xml version="1.0" encoding="UTF-8"?><web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"><servlet><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><session-config><session-timeout>10</session-timeout></session-config><welcome-file-list><welcome-file>index.jsp</welcome-file></welcome-file-list></web-app>

六、配置完成後，在JSP頁面通過taglib方式進行調用--index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%><%@ taglib uri="http://ckeditor.com" prefix="ckeditor"%>   <%@ taglib uri="http://ckfinder.com" prefix="ckfinder"%>  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><script type="text/javascript">function test() {//JavaScript判空，如果確定var editor_data = CKEDITOR.instances.content.getData();if(editor_data==null||editor_data==""){alert("資料為空白不能提交");}else{if(confirm(editor_data)){document.myform.submit();}}}</script><title>ckeditor富文本測試-- by jCuckoo</title></head><body><form action="doTest.jsp" name="myform" method="post">     <ckfinder:setupCKEditor editor="content" basePath="ckfinder/" />        <ckeditor:editor basePath="ckeditor/"                editor="content" value="CKEditor Test......(此處的內容會在編輯器中顯示)--by jCuckoo " />         <input type="button" onclick="test()" value="提交資料"/>     </form></body></html>

七、測試

八、接受頁面doTest.jsp 代碼及顯示效果

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>擷取傳遞的資料 -- by jCuckoo</title>  </head>  <body>  <%request.setCharacterEncoding("gbk"); %>    <%=request.getParameter("content") %>  </body></html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More