CKEditor與CKFinder整合並實現檔案上傳功能
一．需要的資源：
a) ckeditor_3.6.2 （解壓）
b) ckeditor-java-3.6.2 （解壓）
c) ckfinder_java_2.1 （解壓）
二．執行步驟：
1.MyEclipse新建Web Project：CKEditor_Finder
2.複製以下資料夾到WebRoot下面：
ckfinder_java_2.1\ckfinder\CKFinderJava\ckfinder
注意：CKFinder加粗的是war包解壓後的資料夾的名稱
ckeditor_3.6.2/ckeditor
3.複製CKFinder配置檔案到WEB-INF下面：
ckfinder_java_2.1\ckfinder\CKFinderJava\WEB-INF\config.
4.複製下面資料夾下面所有jar檔案到WEB-INf/lib下面：
ckfinder_java_2.1\ckfinder\CKFinderJava\WEB-INF\lib
ckeditor-java-3.6.2\WEB-INF\lib
三．下面刪除無用的檔案
首先是ckeditor下面的檔案：
_sample,_source, CHANGES.html，ckeditor_php4.php， ckeditor_php5.php,
ckeditor.asp, ckeditor.pack, INSTALL.html, LICENSE.html
然後是ckfinder下面的檔案：
_samples, help, changelog.txt, install.txt, license.txt, translation.txt
四．修改配置檔案config.xml
<enabled>true</enabled>
<baseURL>/CKEditor_Finder/userfiles/</baseURL>
五．在web.xml中增加如下程式碼：
|
<servlet> <servlet-name>ConnectorServlet</servlet-name><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> <filter> <filter-name>FileUploadFilter</filter-name><filter-class>com.ckfinder.connector.FileUploadFilter</filter-class> <init-param> <param-name>sessionCookieName</param-name> <param-value></param-value> </init-param> <init-param> <param-name>sessionParameterName</param-name> <param-value>jsessionid</param-value> </init-param> </filter> <filter-mapping> <filter-name>FileUploadFilter</filter-name> <url-pattern> /ckfinder/core/connector/java/connector.java </url-pattern> </filter-mapping> <session-config> <session-timeout>10</session-timeout> </session-config> |
六.修改ckeditor/config.js檔案的內容
|
CKEDITOR.editorConfig = function(config) { config.filebrowserBrowseUrl = '/CKEditor_Finder/ckfinder/ckfinder.html'; config.filebrowserImageBrowseUrl = '/CKEditor_Finder/ckfinder/ckfinder.html?type=Images'; config.filebrowserFlashBrowseUrl = '/CKEditor_Finder/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'; // config.filebrowserWindowWidth = '1000'; // config.filebrowserWindowHeight = '700'; config.language = "zh-cn"; }; |
七．修改index.jsp檔案的內容如下：
|
<%@pagelanguage="java"import="java.util.*"pageEncoding="utf-8"%> <%@tagliburi="http://ckfinder.com"prefix="ckfinder"%> <%@tagliburi="http://ckeditor.com"prefix="ckeditor"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPEHTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <basehref="<%=basePath%>"> <title>首頁</title> <metahttp-equiv="pragma"content="no-cache"> <metahttp-equiv="cache-control"content="no-cache"> <metahttp-equiv="expires"content="0"> </head> <body> <%--<ckfinder:ckfinder basePath="/CKFinderJava_0100/ckfinder/" width="700" height="500" /> --%> <formaction="getContent"method="get"> <textareacols="80"id="editor1"name="editor1"rows="10"></textarea> <inputtype="submit"value="Submit"/> </form> <ckfinder:setupCKEditorbasePath="/CKEditor_Finder/ckfinder/"editor="editor1"/> <ckeditor:replacereplace="editor1"basePath="/CKEditor_Finder/ckeditor/"/> </body> </html> |
http://localhost/CKEditor_Finder/
關於破解：
要替換的檔案的位置：/CKEditor_Finder/WebRoot/ckeditor/plugins/image/dialogs/image.js
Ckfinder.js檔案的修改：
1.CKEditer/config.js檔案大括號最後新增：
config.image_previewText = "預覽圖片的位置！ 自己修改！！ ";
2.return a.bF.length > 0 && A.indexOf(a.bF.substr(0, 9)) != -1 改為return false;
3.註釋這一部分，這樣，在上傳一中圖片之後，中間就不會有提示了
/*if (!S && (!p || a.bs.indexOf(p) % 8 < 4)) {
P.mj = J;
S = 1;
}
if ((P.eu && !T || S) && P.mj) {Q.addClass('files_message');this.tools.of().setHtml(P.mj);
}*/
4.註釋掉這個部分：這樣，左下角的東西就看不見了
/*if (!B)this.dV().getChild(0).appendHtml(y || z || w != 4 ? r: s+ "\074\x62\x3e"+i.htmlEncode(a.ed)+"\074\057\x62\076\074\x2f\x64\151\x76\x3e");*/
原文地址：http://lvdong5830.iteye.com/blog/1388761
相關推薦
CKEditor與CKFinder整合並實現檔案上傳功能
一．需要的資源： a) ckeditor_3.6.2 （解壓） b) ckeditor-java-3.6.2 （解壓） c) ckfinder_java_2.1 （解壓） 二．執行步驟： 1.MyEclipse新建Web Project：CKEditor_Fin
MAC實用SSH連線遠端伺服器，並實現檔案上傳下載
MAC作為程式設計師的神器，在程式設計上的使用遠超window的電腦，而MAC本身提供了SSH功能，配合VIM編輯器對程式設計十分有幫助。 使用ssh連線遠端主機 sudo -i 切換root許可權 ssh [email protected] 其中，
node使用express搭建簡單web框架並實現檔案上傳
1.建立目錄web 2.編寫package.json(模組管理檔案，描述模組資訊) { "name": "web", "version": "1.0.0", "description": "first web app", "main": "app.js",
CKEditor的使用，並實現圖片上傳
ckeditor是一款富文字編輯器，類似於論壇帖子下邊的回覆輸入框。 1、先要下載相應js檔案，點我下載。根據自己的需求選擇外掛的豐富程度，下載後解壓得到一個資料夾，放到webRoot目錄下。 2、在jsp頁面或html頁面引入核心js。 <sc
如何用spring整合mongodb實現檔案上傳
首先要把必要的mongoDB需要的jar加進專案中 定義mongoDB的bean <bean id="mongoClient" class="com.mongodb.MongoClient"> <constructor-arg index="
原生javascript實現檔案上傳功能程式碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ini
【SSH網上商城專案實戰13】Struts2實現檔案上傳功能
轉自：https://blog.csdn.net/eson_15/article/details/51366384 上一節我們做完了新增和更新商品的功能，這兩個部分裡有涉及到商品圖片的上傳，並沒有詳細解說。為此，這篇文章詳細介紹一下Struts2實現檔案上傳的功能。 1
利用拖拽效果實現檔案上傳功能
1、獲取檔案的方法file物件是來自使用者在一個<input>表單元素上選擇檔案後返回的filelist物件,也可以是來自自由拖拽操作生成的dataTransfer物件，dataTransf
php實現檔案上傳功能
無聊的很 就來寫個部落格吧 這次來簡單寫下 php 怎麼實現上傳檔案 廢話不多說 開搞！ 這是index檔案 1 <form action="upload_file.php" method="post" enctype="multipart/form-d
框架中如何根據fileupload工具包實現檔案上傳功能
工具包 Apache-fileupload.jar – 檔案上傳核心包。 Apache-commons-io.jar – 這個包是fileupload的依賴包。同時又是一個工具包。 程式碼 servletFileUpload官方API /*獲取tomcat的wor
使用ajax，Jquery，Spring Boot，MultipartFile實現檔案上傳功能
MultipartFile 方法總結 byte[] getBytes() 返回檔案的內容作為一個位元組陣列。 String getContentType()&nbs
WebUploader+SpringMVC實現檔案上傳功能
官方文件及更多示例請參考： http://fex.baidu.com/webuploader/ 不扯廢話了，由於我需要的只是上傳圖片功能，官網上邊還說“WebUploader只包含檔案上傳的底層實現，不包括UI部分，所以互動方面可以自由發揮。”但是我又看到官網的例子不錯，就把demo的js和css扒了下
如何基於ServiceComb實現檔案上傳功能
檔案上傳，當前支援在vertx rest通道和servlet rest中使用。 檔案上傳使用標準的http form格式，可與瀏覽器的上傳直接對接。 Producer： 支援jaxrs和springmvc開發模式 jaxrs開發模式： 支援servlet定義的j
Django中實現檔案上傳功能
在web開發中，檔案上傳與下載是常見的功能，在Django中實現檔案的上傳與下載也非常簡單，實現步驟與其他功能實現類似，1. 新建一個模板，2. 編寫模板對應的view函式，3. 配置view與模板關
struts2中實現檔案上傳功能
package com.upload.action; import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.InputStream; import java.i
MVC5：使用Ajax和HTML5實現檔案上傳功能
引言在實際程式設計中，經常遇到實現檔案上傳並顯示上傳進度的功能，基於此目的，本文就為大家介紹不使用flash 或任何上傳檔案的外掛來實現帶有進度顯示的檔案上傳功能。基本功能：實現帶有進度條的檔案上傳功能高階功能：通過拖拽檔案的操作實現多個檔案上傳功能背景HTML5提供了一種標
SpringBoot實現檔案上傳功能詳解
[toc] # 利用SpirngBoot實現檔案上傳功能 ## 零、本篇要點 - 介紹SpringBoot對檔案上傳的自動配置。 - 介紹MultipartFile介面。 - 介紹SpringBoot+Thymeleaf檔案上傳demo的整合。 - 介紹對檔案型別，檔名長度等判斷方法。 ## 一、Sp
CKEditor 整合CKFinder實現檔案上傳及富文字操作
<servlet> <servlet-name>ConnectorServlet</servlet-name> <servlet-class>com.ckfinder.connector.ConnectorServlet&
基於tobato的fastdfs與spring boot整合實現檔案上傳和下載
專案結構： pom.xml檔案新增配置： <!-- fastdfs --> <dependency> <groupId>com.github.tobato</groupId> <artifactId>fastd
記錄一次使用Ckeditor+Ckfinder實現檔案上傳
一、準備工作 Ckeditor_4.5.7_full + Ckfinder_java_2.6.0 二、解壓 1.解壓ckeditor，和平常檔案解壓相同，正常解壓即可 2.解壓ckfinder，解壓完成後進入ckfinder資料夾下，發現有CKF