ckeditor3.6.5与ckfinder2.3集成

    关于客户端编辑器以前用过别人集成好的，最近要用到，就自己研究了一下ckeditor。这个是vckeditor的升级版本，现在用起来非常简单，不过cdeditor本身没有直接提供图片上传功能，因此我把ckfinder集成进来。插件的各个版本都差不多，只是有些地方略有不同，如题上所写我用的是3.6.5与2.3，大家可以到官网下载。

    下面就进入正题，下载好ckeditor_3.6.5.zip与ckfinder_java_2.3.zip，在myeclisp中新建web工程TestEdit，在WebRoot也新建文件夹myeditor，把ckeditor_3.6.5.zip解压的ckeditor文件拷到myeditor中，把ckfinder_java_2.2.1.zip解压，将ckfinder_java_2.2.1/ckfinder下的 CKFinderJava.war再次解压，找到CKFinderJava下的ckfinder文件夹，将其拷贝到myeditor根目录下，接下来把ckfinder\CKFinderJava\WEB-INF\lib中的jar包加到工程中。

   myeditor/ckeditor/config.js中的配置
      CKEDITOR.editorConfig = function( config ){
                   // Define changes to default configuration here. For example:
                 // config.language = 'fr';
 
                 // 编辑器样式，有三种：'kama'（默认）、'office2003'、'v2'
                config.skin = 'office2003';
                 // 设置宽高
              config.width = 900;
              config.height = 500;
              // 背景颜色
              config.uiColor = '#AADC6E';

           //图片上传配置
           config.filebrowserBrowseUrl = 'myeditor/ckfinder/ckfinder.html';   //上传图片页面
             config.filebrowserImageBrowseUrl = 'myeditor/ckfinder/ckfinder.html?type=Images';  
             config.filebrowserFlashBrowseUrl = 'myeditor/ckfinder/ckfinder.html?type=Flash';  
            config.filebrowserUploadUrl = ''/TestEdit/myeditor/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files'; 
              config.filebrowserImageUploadUrl = '/TestEdit/myeditor/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images';  
             config.filebrowserFlashUploadUrl = ''/TestEdit/myeditor/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash';  
              config.filebrowserWindowWidth = '1000';  
             config.filebrowserWindowHeight = '700';
            config.image_previewText = "预览图片效果！";//预览图片的位置！ 自己修改！

            };

    把ckfinder中ckfinder\CKFinderJava\WEB-INF下的config.js拷到工程的WEB-INF下，修改下面几个配置

     <enabled>true</enabled>
    <baseDir></baseDir>
    <baseURL>/TestEdit/userfiles/</baseURL>文件放置路径。

    在web.xml中配置servlet，如下：

      <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>/myeditor/ckfinder/core/connector/java/connector.java</url-pattern>
    </servlet-mapping>

   页面中加入

    <script type="text/javascript" src="myeditor/ckeditor/ckeditor.js"></script>
    <script type="text/javascript" src="myeditor/ckeditor/ckfinder.js"></script>

    与

    <textarea cols="80" id="txtcontent" class="ckeditor" name="txtcontent" rows="10">即可。

后续几点修改

一、CKEditer/config.js
1、config.image_previewText = "预览图片效果！";//预览图片的位置的文字。
二、ckfinder/ckfinder.js文件
2、注释掉这个部分：这样，左下角的东西就看不见了
/*if (!B) this.dV().getChild(0).appendHtml(y || z || w != 4 ? r: s+
"\074\x62\x3e"+i.htmlEncode(a.ed)+
 "\074\057\x62\076\074\x2f\x64\151\x76\x3e");*/
3、隐藏图片上边的文字：查找h4为它添加style='display:none'
三、去掉'浏览服务器'按钮打开ckeditor\plugins\image\dialogs\image.js文件，
打开ckeditor\plugins\link\dialogs\link.js文件，打开ckeditor\plugins\flash\dialogs\flash.js文件，
在其中找browseserver，为其添加style:'display:none'

四重命名图片，修改com.ckfinder.connector.handlers.command.FileUploadCommand
                            中的validateUploadItem(FileItem item,String path)中的
                                   if (item.getName() != null && item.getName().length() > 0) {
                                   this.fileName = getFileItemName(item);
                                   } else {
                                   this.errorCode =   Constants.Errors.CKFINDER_CONNECTOR_ERROR_UPLOADED_INVALID;
                                  return false;
                                    }

                                 this.newFileName = this.fileName;
  
                                   //自己代码

 

最后要说的一点是config.filebrowserImageUploadUrl = '/TestEdit/myeditor/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images';  

这样的路径我写的是全路径，如果不是上传图片的时候，第一次上传服务器没问题，在上传一次就有问题。有知道不用全路径的同学可以留言告诉一声。