整合CKEditor和CKFinder(for java)

https://cksource.com/ckfinder/download

 

下载地址 CKEditor 
我下载的版本ckfinder_java_2.4 
解压之后，会看到一个CKFinderJava-2.4.war文件，直接放到Tomcat/webapps发布目录下，把服务打开就自动解压了，然后将ckfinder目录Copy到你项目WebRoot下。 
步骤一：将CKFinderJava-2.4下的jar包Copy到你的项目下，还有WEB-INF/config.xml文件Copy到你的项目WEB-INF/下。 
步骤二：修改config.xml文件（说明：CKFinderJava/userfiles/目录存储文件的目录） 

<enabled>true</enabled>
<baseURL>/CKEditorAndCKFinder/CKFinderJava/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>
/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文件（当前也可以是自己编写的js配置文件，上一篇介绍过） 

config.filebrowserBrowseUrl =  '/CKEditorAndCKFinder/ckfinder/ckfinder.html' ;  
config.filebrowserImageBrowseUrl =  '/CKEditorAndCKFinder/ckfinder/ckfinder.html?type=Images' ;  
config.filebrowserFlashBrowseUrl =  '/CKEditorAndCKFinder/ckfinder/ckfinder.html?type=Flash' ;  
config.filebrowserUploadUrl =  '/CKEditorAndCKFinder/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files' ;  
config.filebrowserImageUploadUrl =  '/CKEditorAndCKFinder/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images' ;  
config.filebrowserFlashUploadUrl =  '/CKEditorAndCKFinder/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash' ;  
config.filebrowserWindowWidth = '1000';  
config.filebrowserWindowHeight = '700';  
config.language =  "zh-cn" ;

关于文件名乱码，图片不能显示问题。 
解决方案一：修改Tomcat web.xml配置文件 
<Connector URIEncoding="UTF-8" connectionTimeout="20000" port="6060" protocol="HTTP/1.1" redirectPort="8443"/> 
当然，该方式不合适，导致全部站点使用同样的编码方式（对于GET请求还存在其它问题）。 
解决方案二： 
修改源代码，实现文件重命名 
1、通过UUID.randomUUID().toString() 
2、日期命名法 
我创建新的项目，将CKFinder源码导入，修改FileUploadCommand类的saveTemporaryFile方法，将newFileName重命令即可。 
1、用压缩软件打开jar包，找到修改文件的路径。 
2、把编译好的class文件添加到jar包的该路径下替换原来的文件 
3、收工！ 

 

		this.newFileName = "bjs-"+UUID.randomUUID().toString()+"."+FileUtils.getFileExtension(this.newFileName);
		File file = new File(path, this.newFileName);

 

     1. 从http://ckeditor.com中下载ckeditor for java和ckfinder for java。

        2. 将下载的文件解压，将ckeditor文件夹和ckfinder文件夹放置到项目根目录下，其中ckfinder文件夹在ckfinder*.war中。

        3. ckfinder*.war的WEB-INF目录下有一个config.xml文件，将之放置在项目的WEB-INF目录下，打开它，并进行相应修改：

 

<config>
    <enabled><span>true</span></enabled><!--是否开启图片上传功能--!>
    <baseDir></baseDir>
    <baseURL><span>/ruisystem/userfiles/</span></baseURL><!--图片上传后的位置-->
    <licenseKey></licenseKey>
    <licenseName></licenseName>
    <imgWidth>1600</imgWidth>
    <imgHeight>1200</imgHeight>
    <imgQuality>80</imgQuality>
    <uriEncoding><span>UTF-8</span></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>

        4. 打开ckeditor/config.js作相应修改，以下是我的修改：

/*
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
 */

CKEDITOR.editorConfig = function(config) {
    // Define changes to default configuration here. For example:
    // config.language = 'fr';
    // config.uiColor = '#AADC6E';
    config.height = '700px';
    config.font_names = '新细明体/PMingLiU;细明体/MingLiU;标楷体/DFKai-SB;黑体/SimHei;宋体/SimSun;新宋体/NSimSun;仿宋/FangSong;楷体/KaiTi;仿宋_GB2312/FangSong_GB2312楷体_GB2312/KaiTi_GB2312;微軟正黑體/Microsoft JhengHei;微软雅黑体/Microsoft YaHei;隶书/LiSu;幼圆/YouYuan;华文细黑/STXihei;华文楷体/STKaiti;华文宋体/STSong;华文中宋/STZhongsong;华文仿宋/STFangsong;方正舒体/FZShuTi;方正姚体/FZYaoti;华文彩云/STCaiyun;华文琥珀/STHupo;华文隶书/STLiti;华文行楷/STXingkai;华文新魏/STXinwei;'
            + config.font_names;
};

        5. 将ckeditor-java-core-v.jar和ckfinder*.war的WEB-INF/lib目录下的所有jar包复制到项目中。

 

        6. 打开要使用ckeditor的页面，首先引入两个js：

 

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

        7. 在需要使用ckeditor的域下面添加一些代码：

 

 

<textarea rows="2" cols="2" name="content" id="content"></textarea>
<script type="text/javascript">
if (CKEDITOR.instances['content']) {
    CKEDITOR.remove(CKEDITOR.instances['content']);
}

var basePath = '你的位置';

CKEDITOR
        .replace(
                'content',
                {
                    filebrowserBrowseUrl : basePath
                            + '/ckfinder/ckfinder.htm',
                    filebrowserImageBrowseUrl : basePath
                            + '/ckfinder/ckfinder.htm?type=Images',
                    filebrowserFlashBrowseUrl : basePath
                            + '/ckfinder/ckfinder.htm?type=Flash',
                    filebrowserUploadUrl : basePath
                            + '/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files',
                    filebrowserImageUploadUrl : basePath
                            + '/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images',
                    filebrowserFlashUploadUrl : basePath
                            + '/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash',
                    filebrowserWindowWidth : '1000',
                    filebrowserWindowHeight : '1000'
                });
</script>

        8. 在web.xml中添加如下代码：

 

 

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

        启动tomcat，开始体验吧。