ckeditor ckfinder 集成 ，添加本地上传图片功能

• 所需工具文件：ckeditor 和ckfinder js文件，ckeditor-java-core-3.5.3.jar；
• 解压CKEditor.zip,把解压得到的文件夹全部放到网站根目录下；
• 解压ckfinder_java_2.3.zip，在WebRoot下新建ckfinder文件夹,在解压后的文件夹中找到ckfinder\_sources\CKFinder for Java\WebApp\src\main\webapp\ckfinder文件夹，拷贝到目标文件夹下；
• samples文件夹、changelog.txt、install.txt、license.txt、translations.txt可以删掉， lang包中，删掉除en.js和zh-cn.js之外的文件
• 解压ckeditor-java-3.6.4.war，把CKFinderJava\WEB-INF\lib下的

        activation-1.1.jar、CKFinder-2.1.jar、CKFinderPlugin-FileEditor-2.1.jar、

        CKFinderPlugin-ImageResize-2.1.jar、Thumbnailator-0.3.10.jar、mail.jar、

        commons-fileupload-1.1.1.jar、commons-io-1.1.jar

     拷贝到项目的lib下；

• 把配置文件config.xml、web.xml也拷贝到WebRoot/WEB-INF下，打开config.xml 第二行的<enabled>false</enabled>换成<enabled>true</enabled> 第四行的<baseURL>/CKFinderJava/userfiles/</baseURL> 换成<baseURL>/你的项目名称/userfiles/</baseURL>

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

  
  
  

• 配置ckeditor中的config.js 文件：

  CKEDITOR.editorConfig = function( config ) 
  { 
      // Define changes to default configuration here. For example: 
      config.language = 'zh-cn'; 
      config.uiColor = '#AADC6E'; 
      config.toolbar = "Full"; 
      config.skin = 'v2'; 
      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.filebrowserWindowWidth = '700',   config.filebrowserWindowHeight = '700' ; 
  };

  
  
  

• 配置拷入的config.xml文件：

  <baseDir></baseDir> 
  <baseURL>/项目名称/userfiles/</baseURL>

• 在jsp中引用ckeditor编辑器：
• <script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
  <script type="text/javascript" src="/ckfinder/ckfinder.js"></script>
  

            $(function(){

                   var editor = CKEDITOR.replace('要替换的textare的名字');

                 CKFinder.setupCKEditor(editor,'/ckfinder/');

           });

       

      

转载于:https://www.cnblogs.com/wyang0126/archive/2013/06/13/5039969.html