CKEditor與 CKFinder 整合並實現文件上傳功能

時間 2019-11-17

標籤 ckeditor ckfinder 合併實現文件上傳功能简体版

原文原文鏈接

事先說明：此整合的是java版本的， javascript

用到的有：jsp + ckeditor + ckfinderphp

在項目中咱們使用了FckEditor，但最新又出來了個ckEditor，到官方網站看看才知道FckEditor在2.6版本以後就更名爲ckEditor了。html

FckEditor裏有java版本的配置，能夠支持php、asp.net、java版本，如今一會兒變爲ckEditor了。配置簡單的編輯器很簡單，咱們下載ckEditor就可使用，我想大多數人都但願能用到編輯器裏的瀏覽/插入圖片功能吧。java

一．須要的資源：web

用到的網站，文件本身下載:session

a) ckeditor_3.6.2 （解壓）app

b) ckeditor-java-3.6.2 （解壓）asp.net

c) ckfinder_java_2.3.1 （解壓）jsp

二．執行步驟：編輯器

1. MyEclipse新建 Web Project ： itcastCKEditor

2.解壓ckfinder_java_2.3.1，導入相應的jar包，目錄在ckfinder_java_2.3.1\ckfinder\CKFinderJava\WEB-INF\lib下。

以及：

ckeditor-java-3.6.2\WEB-INF\lib下的包，共9個包

3. 查找ckfinder_java_2.3.1\ckfinder\_sources\CKFinder for Java\CKFinder\src\main\java中的包，並將包放置到項目的src下。

4. 複製如下文件夾到WebRoot 下面：

（1）ckfinder_java_2.3.1\ ckfinder\CKFinderJava\ckfinder

（2）ckeditor_3.6.2\ckeditor

5. 複製 CKFinder配置文件到WEB-INF 下面：

ckfinder_java_2.3.1\ckfinder\CKFinderJava\WEB-INF\config.xml

三．下面刪除無用的文件

首先是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

Xml代碼

< enabled > true </ enabled >

<baseURL>/userfiles/</baseURL>

注意：若是發現附件上傳成功，可是不能將正確的路徑帶到URL的時候，能夠試圖修改如下代碼：

<types>

<url>/itcastCKEditor%BASE_URL%files/</url>

<directory>%BASE_DIR%files</directory>

<allowedExtensions>7z,aiff,asf,avi,bmp,csv,doc,docx,fla,flv,gif,gz,gzip,jpeg,jpg,mid,mov,mp3,mp4,mpc,mpeg,mpg,ods,odt,pdf,png,ppt,pptx,pxd,qt,ram,rar,rm,rmi,rmvb,rtf,sdc,sitd,swf,sxc,sxw,tar,tgz,tif,tiff,txt,vsd,wav,wma,wmv,xls,xlsx,zip

</allowedExtensions>

</type>

<url>/itcastCKEditor%BASE_URL%images/</url>

<directory>%BASE_DIR%images</directory>

</type>

<url>/itcastCKEditor%BASE_URL%flash/</url>

<directory>%BASE_DIR%flash</directory>

</type>

</types>

紅色部分爲添加的代碼。

< enabled > true </ enabled >

< baseURL > /CKEditor_Finder/userfiles/ </ baseURL >

五．在web.xml 中增長以下代碼：

Xml代碼

<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>

<filter-name>FileUploadFilter</filter-name>

<filter-class>com.ckfinder.connector.FileUploadFilter</filter-class>

<init-param>

<param-name>sessionCookieName</param-name>

<param-value>JSESSIONID</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>< 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 >

< filter >

<filter-name> FileUploadFilter </ filter-name>

<filter-class>com.ckfinder.connector.FileUploadFilter</filter-class>

< init-param >

< param-name >sessionCookieName</param-name>

< param-value >JSESSIONID</ 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文件的內容

Js代碼

CKEDITOR.editorConfig = function( config )

{

// Define changes to default configuration here. For example:

// config.language = 'fr';

// config.uiColor = '#AADC6E';

config.language = 'zh-cn'; // 配置語言

// config.uiColor = '#fff'; // 背景顏色

config.width = '800px'; // 寬度

config.height = '300px'; // 高度

// config.skin = 'office2003';// 界面v2,kama,office2003

// config.toolbar = 'Full';// 工具欄風格Full,Basic

// config.font_names='宋體/宋體;黑體/黑體;仿宋/仿宋_GB2312;楷體/楷體_GB2312;' +

// '隸書/隸書;幼圓/幼圓;微軟雅黑/微軟雅黑;'+ config.font_names;

// config.htmlEncodeOutput = true;

//config.startupOutlineBlocks = false;

//配置默認配置

/**config.language = 'zh-cn'; //配置語言

config.uiColor = '#FFF'; //背景顏色

config.width = 400; //寬度

config.height = 400; //高度

config.skin = 'v2'; //編輯器皮膚樣式

// 取消「拖拽以改變尺寸」功能

config.resize_enabled = false;

// 使用基礎工具欄

config.toolbar = "Basic";

// 使用全能工具欄

config.toolbar = "Full";

//使用自定義工具欄

config.toolbar =

[

['Source', 'Preview', '-'],

['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', ],

['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],

['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar','PageBreak'],

'/',

['Bold', 'Italic', 'Underline', '-', 'Subscript', 'Superscript'],

['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'],

['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],

['Link', 'Unlink', 'Anchor'],

'/',

['Format', 'Font', 'FontSize'],

['TextColor', 'BGColor'],

['Maximize', 'ShowBlocks', '-', 'About']

];*/

/*** 文件上傳功能的配置-----------------------

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';

};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" ;

};

注意：紅色的代碼要配置，如ckfinder/ckfinder.html表示在項目的根目錄下須要配置，例如itcastCKEditor/ckfinder/ckfinder.html，但若是在項目的根目錄下出現itcastCKEditor/system/ckfinder/ckfinder.html，此時可使用../ckfinder/ckfinder.html，尋找路徑。

七．修改index.jsp文件的內容以下：

Jsp代碼

<%@ page language="java" pageEncoding="UTF-8"%>

<html>

<head>

</head>

<body>

<TR>

if( CKEDITOR.instances['ebreContent'] ){

CKEDITOR.remove(CKEDITOR.instances['ebreContent']);

} //解決例外被拋出且未被接住問題

CKEDITOR.replace("ebreContent",{ height: 200, width: 820 });

//CKFinder.setupCKEditor(editor,'../ckfinder/');

</script>

</td>

</tr>

</table>

</TD>

</TR>

</TABLE>

</div>

</form>

</body>

</html><%@ page language = "java" import = "java.util.*" pageEncoding = "utf-8" %>

<%@ taglib uri = "http://ckfinder.com" prefix = "ckfinder" %>

<%@ taglib uri = "http://ckeditor.com" prefix = "ckeditor" %>

String path = request.getContextPath();

String basePath = request.getScheme()+ "://" +request.getServerName()+ ":" +request.getServerPort()+path+ "/" ;

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

< html >

< head >

< base href = " <%= basePath %> " >

< title > 首頁 </ title >

< meta http-equiv = "pragma" content = "no-cache" >

< meta http-equiv = "cache-control" content = "no-cache" >

< meta http-equiv = "expires" content = "0" >

</ head >

< body >

< form action = "getContent" method = "get" >

< textarea cols = "80" id = "editor1" name = "editor1" rows = "10" ></ textarea >

< input type = "submit" value = "Submit" />

</ form >

< ckfinder:setupCKEditor basePath = "/CKEditor_Finder/ckfinder/" editor = "editor1" />

< ckeditor:replace replace = "editor1" basePath = "/CKEditor_Finder/ckeditor/" />

</ body >

</ html >

http://localhost:8080/itcastCKEditor/

（附錄）注意：若是出現中文問題，有一個重要的操做上面沒有說起：能夠試下。
這個操做就是：找到Tomcat/config/server.xml
<Connector port="80" protocol="HTTP/1.1"
connectionTimeout="20000"
redirectPort="8443" URIEncoding="utf-8" />
這個設置中的URIEncoding 是爲了在訪問的時候,即便訪問路徑中出現中文也能正常訪問. 若是還有其餘問題,能夠發貼繼續交流一下^_^

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。