CKEditor+CKFinder整合 java-CSDN博客

CKEditor是新一代的FCKeditor，是一个重新开发的版本。CKEditor是全球最优秀的网页在线文字编辑器之一，因其惊人的性能与可扩展性而广泛的被运用于各大网站。

本篇文章主要介绍ckeditor-java-3.6.4 + ckfinder_java_2.4

CKEditor下载地址：http://ckeditor.com/download ：CKEditor 3.6.4 for Java 下载 Download .war （即ckeditor-java-3.6.4.war ）

CKFinder下载地址：http://cksource.com/ckfinder/download 下载 ckfinder_java_2.4.zip

1、解压ckeditor-java-3.6.4.war，然后打开ckeditor文件夹，只需保留：adapters、 images、lang、plugins、 skins、themes、ckeditor_basic.js、ckeditor_source.js、ckeditor_basic_source.js、 ckeditor.js、config.js 即可，其他的文件可以删除。然后将整个ckeditor放在web工程下，与WEB-INF处于同一级目录。

2、将刚解压的WEB-INF\lib下的ckeditor-java-core-3.5.3.jar包拷贝至web项目的lib下。

3、将ckfinder_java_2.4.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>
<baseDir></baseDir>
<baseURL>http://127.0.0.1:8080/ProductCenter/jsp/admin/uploadfile/</baseURL> 
<licenseKey></licenseKey>
<licenseName></licenseName>
<imgWidth>1600</imgWidth>
<imgHeight>1200</imgHeight>
<imgQuality>80</imgQuality>
<uriEncoding>UTF-8</uriEncoding>
<forceASCII>false</forceASCII>
        <disallowUnsafeCharacters>false</disallowUnsafeCharacters>
<userRoleSessionVar>CKFinder_UserRole</userRoleSessionVar>
<checkDoubleExtension>true</checkDoubleExtension>
<checkSizeAfterScaling>true</checkSizeAfterScaling>
<secureImageUploads>true</secureImageUploads>
<htmlExtensions>html,htm,xml,js</htmlExtensions>
<hideFolders>
  <folder>.svn</folder>
  <folder>CVS</folder>
</hideFolders>
<hideFiles>
  <file>.*</file>
</hideFiles>
<defaultResourceTypes></defaultResourceTypes>
<types>
  <type name="Files">
   <url>%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>%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>%BASE_URL%flash/</url>
   <directory>%BASE_DIR%flash</directory>
   <maxSize>0</maxSize>
   <allowedExtensions>swf,flv</allowedExtensions>
   <deniedExtensions></deniedExtensions>
  </type>
</types>
<accessControls>
  <accessControl>
   <role>*</role>
   <resourceType>*</resourceType>
   <folder>/</folder>
   <folderView>true</folderView>
   <folderCreate>true</folderCreate>
   <folderRename>true</folderRename>
   <folderDelete>true</folderDelete>
   <fileView>true</fileView>
   <fileUpload>true</fileUpload>
   <fileRename>true</fileRename>
   <fileDelete>true</fileDelete>
  </accessControl>
</accessControls>
<thumbs>
  <enabled>true</enabled>
  <url>%BASE_URL%_thumbs/</url>
  <directory>%BASE_DIR%_thumbs</directory>
  <directAccess>false</directAccess>
  <maxHeight>100</maxHeight>
  <maxWidth>100</maxWidth>
  <quality>80</quality>
</thumbs>
<plugins>
  <plugin>
   <name>imageresize</name>
   <class>com.ckfinder.connector.plugins.ImageResize</class>
   <params>
    <param name="smallThumb" value="90x90"></param>
    <param name="mediumThumb" value="120x120"></param>
    <param name="largeThumb" value="180x180"></param>
   </params>
  </plugin>
  <plugin>
   <name>fileeditor</name>
   <class>com.ckfinder.connector.plugins.FileEditor</class>
   <params></params>
  </plugin>
</plugins>
<basePathBuilderImpl>com.ckfinder.connector.configuration.ConfigurationPathBuilder</basePathBuilderImpl>
</config>

4、然后在web.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>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>

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' ; //路径需修改

};

6、然后就是CKEditor+CKFinder在jsp页面中应用，如下

a、将如下两句加入jsp页面中

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

b、需要添加编辑组件如下编写

　　 <ckeditor:replace replace="editor1" basePath="ckeditor" />

　　 <ckfinder:setupCKEditor basePath="ckfinder" editor="editor1"/>

转载于:https://www.cnblogs.com/tfcnote/p/CKEditor.html