首頁技術(shù)文章正文

Java培訓(xùn)實(shí)戰(zhàn)教程之CKEditor+CKFinder整合項目開發(fā)文本編輯器功能

更新時間:2015年12月29日13時05分來源:傳智播客Java培訓(xùn)學(xué)院瀏覽次數(shù):

CKFinder實(shí)現(xiàn)文件上傳功能

本文使用：jsp整合ckeditor和ckfinder完成在網(wǎng)頁上嵌套文本編輯器，并實(shí)現(xiàn)圖片上傳功能。
在項目中我們曾經(jīng)可能都使用過FckEditor文本編輯器，該技術(shù)在論壇、互聯(lián)網(wǎng)的項目中顯得尤為重要。但現(xiàn)在最新又出來了個ckEditor，其實(shí)我們到官方網(wǎng)站看看就知道FckEditor在2.6版本之后就改名為ckEditor了。但是這個CkEditor本身支持在頁面上嵌套文本編輯器功能，不支持圖片、文件、flash文件上傳等功能，那該怎么辦呢？你可以在文本編輯器的基礎(chǔ)上自己開發(fā)圖片上傳功能，當(dāng)然也可以使用CKFinder插件，我們這里就給大家介紹一下CKEditor與 CKFinder 整合項目開發(fā)，完成文本編輯器功能以及圖片上傳功能。
  FckEditor里有java版本的配置，可以支持php、asp.net、java等不同版本，現(xiàn)在一下子變?yōu)閏kEditor了。配置更加簡單，效果也更加美觀，我們直接下載ckEditor就可以使用，我想大多數(shù)人都希望能用到編輯器里的瀏覽/插入圖片功能吧，那我們不妨下載CKFinder的插件輔助完成這項功能。
    下面給大家介紹操作的步驟，大家不妨動手試試看啊。

一．需要的資源：

請大家到網(wǎng)站上下載對應(yīng)的3個包:
a) ckeditor_3.6.2 （解壓）
b) ckeditor-java-3.6.2 （解壓）
c) ckfinder_java_2.3.1 （解壓）
其中：
ckeditor_3.6.2：實(shí)現(xiàn)頁面文本編輯器功能
ckeditor-java-3.6.2：實(shí)現(xiàn)文本編輯器的java源碼包
ckfinder_java_2.3.1：實(shí)現(xiàn)文件上傳，圖片上傳的java源碼包

二．執(zhí)行步驟：

第1步.MyEclipse新建 Web工程：例如itcastCKEditor。
第2步.解壓ckfinder_java_2.3.1，導(dǎo)入相應(yīng)的jar包，目錄在ckfinder_java_2.3.1\ckfinder\CKFinderJava\WEB-INF\lib下的8個jar包。

以及：ckeditor-java-3.6.2\WEB-INF\lib下的1個jar包，共9個包

第3步. 復(fù)制以下文件夾到WebRoot 下面：
（1）目錄：ckfinder_java_2.3.1\ckfinder\CKFinderJava\ckfinder

（2）目錄：ckeditor_3.6.2\ckeditor

第4步. 復(fù)制 CKFinder配置文件到項目的WEB-INF 下面：
ckfinder_java_2.3.1\ckfinder\CKFinderJava\WEB-INF\config.xml的config.xml放置到項目的WEB-INF下面，這個配置文件需要我們配置一些信息，別著急，往后看。

三．下面刪除無用的文件，建議刪除，可減少項目的碎片文件

首先是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>
其中：紅色部分為修改的代碼。
注意：如果發(fā)現(xiàn)附件上傳成功，但是不能將正確的路徑帶到URL的時候，可以試圖修改以下代碼：即：添加項目名稱在<url>標(biāo)簽中。
<types>
        <type name="Files">
            <url>/itcastCKEditor%BASE_URL%files/</url>
            <directory>%BASE_DIR%files</directory>
            <maxSize>0</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>/itcastCKEditor%BASE_URL%images/</url>
            <directory>%BASE_DIR%images</directory>
            <maxSize>0</maxSize>
            <allowedExtensions>bmp,gif,jpeg,jpg,png</allowedExtensions>
            <deniedExtensions></deniedExtensions>
        </type>
        <type name="Flash">
            <url>/itcastCKEditor%BASE_URL%flash/</url>
            <directory>%BASE_DIR%flash</directory>
            <maxSize>0</maxSize>
            <allowedExtensions>swf,flv</allowedExtensions>
            <deniedExtensions></deniedExtensions>
        </type>
</types>

五．在web.xml 中配置：

即將CKFinder文件上傳的插件需要通過<servlet><filter>的配置才能整合到項目中，所以需要在web.xml中添加：
Xml代碼
<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>< 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 >

六. 修改項目中WebRoot下的ckeditor/config.js文件的內(nèi)容

該文件配置文本編輯器在頁面上顯示的樣式，以及整合CKFinder插件。
Js代碼
CKEDITOR.editorConfig = function( config )
{
    // Define changes to default configuration here. For example:
    // config.language = 'fr';
    // config.uiColor = '#AADC6E';

    //配置默認(rèn)配置
    config.language = 'zh-cn'; //配置語言
    config.uiColor = '#FFF'; //背景顏色
    config.width = 400; //寬度
config.height = 400; //高度
    config.skin = 'v2'; //編輯器皮膚樣式，office，kama風(fēng)格
    // 取消 “拖拽以改變尺寸”功能
    config.resize_enabled = false;
    // 使用基礎(chǔ)工具欄
    // 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']
    ];
/*** 這里需要配置文件上傳功能的CKFinder插件*/
    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';
};
注意：紅色的代碼一定要配置，如ckfinder/ckfinder.html表示在項目的根目錄下需要配置，例如itcastCKEditor/ckfinder/ckfinder.html，但如果在項目的根目錄下出現(xiàn)命名空間，例如itcastCKEditor/system/ckfinder/ckfinder.html中的system，此時可以使用../ckfinder/ckfinder.html相對路徑的方式尋找路徑，保證路徑的準(zhǔn)確。

七．修改index.jsp頁面的內(nèi)容：

Jsp代碼如下：
<%@ page language="java" pageEncoding="UTF-8"%>
<script language="javascript" src="${pageContext.request.contextPath }/ckeditor/ckeditor.js"></script>
<script language="javascript" src="${pageContext.request.contextPath }/ckfinder/ckfinder.js"></script>
<html>
<head>

</head>

<body>
    <form name="frmList" action="" enctype="multipart/form-data">
        <div align="center">
            <TABLE width="100%" height="100%" cellspacing="0" cellpadding="0" border="0">
                <TR>
                <TD valign="top" width="63%" height="100%">
                    <table width="100%" cellpadding="0">
                        <tr id="content1">
                            <td class="tdRight">
                                <textarea id="ebreContent" name="ebreContent" rows="8" cols="52" class="ckeditor"></textarea>
                            
                                  <script type="text/javascript">
                  CKEDITOR.replace("ebreContent",{ height: 200, width: 820 });
                            </script>
                            </td>
                        </tr>
                    </table>
                </TD>
                </TR>
            </TABLE>
        </div>
    </form>
</body>
</html>

訪問http://localhost:8080/itcastCKEditor/可以看到效果：

八：注意：

上傳圖片出現(xiàn)問題，圖片不能上傳到指定的位置。
    原因：fck的servlet被struts2轉(zhuǎn)發(fā)了，不能使用/*過濾掉所以的url
    解決：在web.xml中修改filter-mapping 將
<filter>
    <filter-name>struts2</filter-name>
    <filter-class>org.apache.struts2.dispatcher.FilterDispatcher</filter-class>
</filter>
<filter-mapping>
    <filter-name>struts2</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
修改成
<filter>
   <filter-name>struts2</filter-name>
   <filter-class> org.apache.struts2.dispatcher.FilterDispatcher</filter-class>
</filter>
<filter-mapping>
   <filter-name>struts2</filter-name>
    <url-pattern>*.do</url-pattern>
    <url-pattern>*.jsp</url-pattern>
</filter-mapping>

本文版權(quán)歸傳智播客Java培訓(xùn)學(xué)院所有，歡迎轉(zhuǎn)載，轉(zhuǎn)載請注明作者出處。謝謝！
作者：傳智播客Java培訓(xùn)學(xué)院
首發(fā)：