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>   <!---注意：必须改成自己项目的，不然上传图片找不到具体的网络路径-->

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

    <
bb83
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:textareaid="txt" name="company.txt" rows="5"cols="120"></s:textarea>

           <ckf:setupCKEditor  basePath="/sitenav/ckfinder/"  editor="txt"/> 

          <!---注意：这里的sitenav为我的项目名称，请换成自己的项目名--->

           <ck:replacereplace="txt" basePath="${path}/ckeditor"></ck:replace>
          <!---注意：这里的${path}需要自己定义一个，如：pageContext.setAttribute("path",request.getContextPath());--->
 
注意:上传的图片有中文名，上传后会不能正常显示预览
附：
1.可以像CKEditor那样通过修改config.js来配置CKFinder的样式

1         config.language = 'zh-cn';//语言设置 
2            config.width='1000px';//宽度 

3            config.height='400px';//高度 
4            config.skin='kama';//界面：kama/v1 

5            config.toolbar='Basic';//工具栏：Full/Basic 

2.上传文件按照时间自动重新命名。有朋友提出这个问题，以前我倒是没有注意。CKFinder默认上传的文件名和源文件名一致，如果文件名重复会自动添加编号“(1)”、“(2)”等，可见com.ckfinder.connector.handlers.command.FileUploadCommand.java的getFinalFileName方法。经过查找发现validateUploadItem(finalFileItem
item, final String path)方法下有一句：

[java]view plaincopyprint?

6        this.newFileName = this.fileName; 

this.newFileName = this.fileName;
感觉这就是问题的所在了，改写代码：

[java]view plaincopyprint?

7        String sExtentsion =FileUtils.getFileExtension(this.fileName); 

8        SimpleDateFormat format=
newSimpleDateFormat("yyyyMMddHHmmss"); 
9        this.newFileName =format.format(new Date()) +"." + sExtentsion;