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