CKEditor+CKFinder+jsp的整理

CKEditor是新一代的FCKeditor，是一個重新開發的版本。CKEditor是全球最優秀的網頁在線文字編輯器之一，因其驚人的性能與可擴展性而廣泛的被運用於各大網站。

本篇文章主要介紹ckeditor_3.6.4+ckfinder_java_2.3

CKEditor下載地址：http://ckeditor.com/download            在線演示地址：http://ckeditor.com/demo

ckeditor-java-core-3.5.3.zip 下載地址：http://ckeditor.com/download   

CKFinder下載地址： http://cksource.com/ckfinder/trial

 1、解壓ckeditor_3.6.4.zip，然後打開ckeditor文件夾，只需保留：images、lang、plugins、skins、themes、ckeditor_basic.js、ckeditor.js、config.js、contents.css即可

其他的文件可以刪除。然後將整個ckeditor放在web工程下，與WEB-INF處於同一級目錄。

2、將ckeditor-java-core-3.5.3.zip解壓，然後將ckeditor-java-core-3.5.3.jar包拷貝至web項目的lib下。

3、將ckfinder_java_2.3.zip解壓，然後將CKFinderJava.war解壓後，將WEB-INF裏面的lib下面所有的jar包拷貝至web項目的lib下，將ckfinder\_sources\CKFinder for Java\WebApp\src\main\webapp下的ckfinder文件夾拷貝至web工程下，與ckeditor保持同級，將其下的WEB-INF下面的config.xml文件拷貝至web項目的WEB-INF下，並根據自己的項目稍作調整即可，如下：

<config>
 <enabled>true</enabled> <!--注意：這裏默認爲false，必須修改爲true-->
 <baseDir></baseDir> <!--此處空着，不建議填寫任何值-->
 <baseURL>http://127.0.0.1:8088/sitenav/uploadFiles/</baseURL> 

  <!---注意：必須改成自己項目的，http://127.0.0.1:8088/sitenav/uploadFiles/或/sitenav/uploadFiles/不然上傳圖片找不到具體的網絡路徑-->
 <licenseKey></licenseKey>
 <licenseName></licenseName>
 <imgWidth>1600</imgWidth>
 <imgHeight>1200</imgHeight>
 <imgQuality>80</imgQuality>
 <uriEncoding>UTF-8</uriEncoding>
 ...... ......
</config>

4、然後在web.xml下添加上傳用的配置如下：

<!-- ckfinder文件上傳配置 start --> 
    <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>2</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> 
    <!-- ckfinder文件上傳配置 end -->

5、然後修改ckeditor下面的config.js，如下：

CKEDITOR.editorConfig = function( config )
{
 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' ;
 config.language = "zh-cn";
 config.image_previewText=' '; //預覽區域顯示內容
 config.skin = 'kama';//默認皮膚
 //config.skin = 'v2';
 //config.skin = 'office2003';
 
 config.toolbar = 'Full';
 
 config.toolbar_Full =
 [
     ['Source','-','Save','NewPage','Preview','-','Templates'],
     ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
     ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
     ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
     '/',
     ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
     ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
     ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
     ['Link','Unlink','Anchor'],
     ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
     '/',
     ['Styles','Format','Font','FontSize'],
     ['TextColor','BGColor'],
     ['Maximize', 'ShowBlocks','-','About']
 ];

 config.toolbar_Basic =
 [
     ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']
 ];
 
};

 

6、然後就是CKEditor+CKFinder在jsp頁面中應用，如下

       a、在jsp文件中加入：

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

      b、需要添加編輯組件如下編寫

         <s:textarea id="txt" name="company.txt" rows="5" cols="120"></s:textarea>
           <ckf:setupCKEditor  basePath="/sitenav/ckfinder/"  editor="txt"/>  

          <!---注意：這裏的sitenav爲我的項目名稱，請換成自己的項目名--->
           <ck:replace replace="txt" basePath="${path}/ckeditor"></ck:replace>

          <!---注意：這裏的${path}需要自己定義一個，如：pageContext.setAttribute("path",request.getContextPath());--->