ckeditor3.6.5+ckfinder2.0.2+jsp編輯器配置 支援伺服器瀏覽/上傳圖片、Flash

             一、相信很多人都用過大名鼎鼎的FckEditor，   最新又出來了個ckEditor， 令人一下子搞不清楚， 到官方網站看看才知道FckEditor在2.6版本之後就改名為ckEditor了， 在這裡特別說明一下， 以免混淆，因為網上搜出來的大多都是FckEditor相關配置的文章。

            二、FckEditor裡有java版本的配置，相信有些同行用過，支援php、asp.net、java版本，現在一下子變為ckEditor了。配置簡單的編輯器很簡單，這裡不多說了，我想大多數人都希望能用到編輯器裡的瀏覽/插入圖片功能吧， 畢竟一條新聞沒個圖片說不過去。 當然我們自己做個上傳功能，然後複製URL地址插入到URL裡也是可以的。 但是這樣客戶操作難度太高了。

            三、這裡介紹一下解決辦法，看到有個哥們的文章說ckEditor理把內建的上傳功能去掉了， 需要修改config.js檔案裡的幾個屬性

 config.filebrowserBrowseUrl = '/js/ckfinder/ckfinder.htm';
 config.filebrowserImageBrowseUrl = '/js/ckfinder/ckfinder.htm?type=Images';
 config.filebrowserFlashBrowseUrl = '/js/ckfinder/ckfinder.htm?type=Flash';
 config.filebrowserUploadUrl = '/js/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files';
 config.filebrowserImageUploadUrl = '/js/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images';
 config.filebrowserFlashUploadUrl = '/js/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash';

需要自己寫這個上傳附件和瀏覽伺服器檔案的方法， 這哥們還真的自己寫了， 遺憾的是只給出部分代碼。  自己寫上傳檔案和瀏覽檔案夾雖然說不是什麼難事， 但難免有些繁瑣費時。

           四、於是自己抱有一點僥倖和偷懶的心理再google了幾下， 發現一個關鍵字很頻繁出現： cdeditor+ckfinder   後面老跟著asp.net  php 之類的。於是就不服氣滴想，難道就沒有支援java的嗎？   ckfinder不是專門為asp.net量身定做的吧？ 於是又仔細看了看cdeditor的官方網站， 然後點擊了一下ckfinder連結，  發現ckfinder已經出了多個語言版本(php、asp.net等）  
支援java是在2.0.2版本之後才出的， 這也就難怪關於cdeditor3.6.5+ckfinder2.0.2+jsp的配置介紹文章很少了，

這裡方便大家下載我給個地址：

http://ckeditor.com/download

http://ckfinder.com/download       注意2.0.2版本以及以上的才支援java      （收費的）

 

先上個再貼代碼！

點擊插入圖片表徵圖

瀏覽/上傳圖片視窗

 

 

整合步驟：（注意紅色字型部分是前後相呼應的）

1  下載的ckeditor-java-3.6.2.rar和ckfinder_java_2.0.2.zip解壓， jsp頭部引入兩個標頭檔

<script type="text/javascript" src="${base}/js/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="${base}/js/ckfinder/ckfinder.js"></script>

 

2  在web.xml裡添加，  注意ckfinder版本是2.0.2       如果超過這版本，servlet的類名不一樣小心！ 

    <!-- ckeditor和ckfinder整合上傳圖片開始 --><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/ckfinder-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>/js/ckfinder/core/connector/java/connector.java</url-pattern></servlet-mapping><!-- ckeditor和ckfinder整合上傳圖片結束 -->

3 在建立檔案WEB-INF/ckfinder-config.xml   內容如下（  紅色的 upload/ckfinder/代表工程裡的路徑，可以對照eclipse

<config><enabled>true</enabled><baseDir></baseDir><baseURL>upload/ckfinder/</baseURL><licenseKey></licenseKey><licenseName></licenseName><imgWidth>1600</imgWidth><imgHeight>1200</imgHeight><imgQuality>80</imgQuality><uriEncoding>UTF-8</uriEncoding><forceASCII>false</forceASCII><userRoleSessionVar>CKFinder_UserRole</userRoleSessionVar><checkDoubleExtension>true</checkDoubleExtension><checkSizeAfterScaling>true</checkSizeAfterScaling><secureImageUploads>true</secureImageUploads><htmlExtensions>html,htm,xml,js</htmlExtensions><hideFolders><folder>.svn</folder><folder>CVS</folder></hideFolders><hideFiles><file>.*</file></hideFiles><defaultResourceTypes></defaultResourceTypes><types><type name="Files"><url>%BASE_URL%files/</url><directory>%BASE_DIR%files</directory><maxSize>10m</maxSize><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><deniedExtensions></deniedExtensions></type><type name="Images"><url>%BASE_URL%images/</url><directory>%BASE_DIR%images</directory><maxSize>2m</maxSize><allowedExtensions>bmp,gif,jpeg,jpg,png</allowedExtensions><deniedExtensions></deniedExtensions></type><type name="Flash"><url>%BASE_URL%flash/</url><directory>%BASE_DIR%flash</directory><maxSize>20m</maxSize><allowedExtensions>swf,flv</allowedExtensions><deniedExtensions></deniedExtensions></type></types><accessControls><accessControl><role>*</role><resourceType>*</resourceType><folder>/</folder><folderView>true</folderView><folderCreate>true</folderCreate><folderRename>false</folderRename><folderDelete>false</folderDelete><fileView>true</fileView><fileUpload>true</fileUpload><fileRename>false</fileRename><fileDelete>false</fileDelete></accessControl></accessControls><thumbs><enabled>true</enabled><url>%BASE_URL%_thumbs/</url><directory>%BASE_DIR%_thumbs</directory><directAccess>false</directAccess><maxHeight>100</maxHeight><maxWidth>100</maxWidth><quality>80</quality></thumbs><plugins><plugin><name>imageresize</name><class>com.ckfinder.connector.plugins.ImageResize</class><params><param name="smallThumb" value="90x90"></param><param name="mediumThumb" value="120x120"></param><param name="largeThumb" value="180x180"></param></params></plugin><plugin><name>fileeditor</name><class>com.ckfinder.connector.plugins.FileEditor</class><params></params></plugin></plugins><basePathBuilderImpl>com.ckfinder.connector.configuration.ConfigurationPathBuilder</basePathBuilderImpl></config>

目錄結構

 

4 修改/js/ckeditor/config.js裡的內容如下：

CKEDITOR.editorConfig = function( config ){config.pasteFromWordIgnoreFontFace = true; config.language='zh-cn';config.uiColor='#AADC6E';config.enterMode=CKEDITOR.ENTER_DIV;config.shiftEnterMode=CKEDITOR.BR;config.skin='office2003';config.extraPlugins='autogrow';    config.resize_maxHeight = 1000;    config.resize_maxWidth = 960;//改變大小的最大寬度    config.resize_minHeight = 250; //改變大小的最小高度    config.resize_minWidth = 750;//改變大小的最小寬度    config.toolbar = ['/',['Preview','Cut','Copy','Paste','PasteFromWord','Print','Undo','Redo','Find','RemoveFormat ','Bold','Italic','Underline','Strike','-','NumberedList','BulletedList'],['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull','-','Image','Table','HorizontalRule','Smiley'],['Styles','Format','Font','FontSize'],];    config.filebrowserBrowseUrl='/js/ckfinder/ckfinder.html';    config.filebrowserImageBrowseUrl='/js/ckfinder/ckfinder.html?type=Images';config.filebrowserFlashBrowseUrl='/js/ckfinder/ckfinder.html?type=Flash';config.filebrowserUploadUrl='/js/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files';config.filebrowserImageUploadUrl='/js/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images';config.filebrowserFlashUploadUrl='/js/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash';config.filebrowserWindowWidth='1000';config.filebrowserWindowHeight='700';};

 

5  複製這幾個jar包到WEB-INF/lib        （前面貼出的那兩個壓縮檔解壓之後有的

CKFinder-2.0.2.jar
CKFinderPlugin-FileEditor-2.0.2.jar
CKFinderPlugin-ImageResize-2.0.2.jar
Thumbnailator-0.3.3.jar
commons-fileupload-1.2.2.jar
commons-io-2.0.1.jar

 

6 在jsp頁面寫代碼：

<script type="text/javascript" src="${base}/js/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="${base}/js/ckfinder/ckfinder.js"></script>

<textarea id="content" name="content"></textarea>

<script type="text/javascript">
 CKEDITOR.replace('content',{height:350});//設定編輯器高度
</script>

到此就大功告成啦， 運行就是上面那3張！ 詳細的配置屬性請網上參考資料，都在ckfinder-config.xml裡，可以控制上傳的檔案類型、大小、能否刪除、能否建立子檔案夾等。