CkEditor 4.1.3 + CkFinder 2.4

CkEditor如今的最新版本是4.2,但我並不推薦使用,由於4.2不支持IE7和火狐3.6版本,因此我選擇4.1.3版本.

 

CkFinder是CkEditor的圖片上傳插件,一款很是好的圖片管理插件

 

CkFinder Java版最近已經升級到2.4,解決了以前不支持加水印的缺陷
在這裏我教你們如何添加CkEditor 4.1.3 + CkFinder 2.4到本身的項目中,並破解某些功能(我最中意的word粘貼功能,格式基本不丟失，消除收費提示)

 

第一步:下載解壓
CkEditor 4.1.3: http://download.cksource.com/CKE ... itor_4.1.3_full.zip
CkFinder 2.4   : http://download.cksource.com/CKF ... finder_java_2.4.zip
CkEditor解壓到jeecg項目的plugin文件夾(jeecg原裝的CKeditor若是不想要了能夠刪除)
CkFinder下載後先解壓到其它地方而後解壓CKFinderJava-2.4.war,把ckfinder複製到jeecg項目的plugin文件夾

第三步:刪除一些無用的文件和文件夾
ckeditor下 刪除samples文件夾(一些例子)、CHANGES.md、LICENSE.md、README.md、lang下除zh-cn.js其它均可以刪(自定義保留一些,我保留了en.js/zh-cn.js/zh.js)      plugins\a11yhelp\dialogs\lang 文件夾下同理

ckfinder下_samples文件夾、changelog.txt、install.txt、license.txt、translations.txt、lang文件夾同上、help文件夾除en其它全刪

第四步：CKFinderJava-2.4.war解壓後複製jar和config.xml
WEB-INF\lib下複製這些jar包到jeecg項目
WEB-INF\config.xml 複製到jeecg項目的WEB-INF下

第五步：配置config.xml

 <?xml version="1.0" encoding="UTF-8"?>
    <config>
            <enabled>true</enabled>
            <!---注意：必須改爲本身項目的，否則上傳圖片找不到具體的網絡路徑 -->
            <baseDir></baseDir>
            <!---這裏我沒有直接配置，而是用攔截器的形式加載，後面會說到 -->
            <baseURL></baseURL>
            <licenseKey></licenseKey>
            <licenseName></licenseName>
            <imgWidth>10000</imgWidth>
            <imgHeight>10000</imgHeight>
            <imgQuality>80</imgQuality>
            <uriEncoding>UTF-8</uriEncoding>
            <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>
            <userRoleSessionVar>CKFinder_UserRole</userRoleSessionVar>
            <accessControls>
                    <accessControl>
                            <role>admin</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>
            <disallowUnsafeCharacters>false</disallowUnsafeCharacters>
            <checkDoubleExtension>true</checkDoubleExtension>
            <checkSizeAfterScaling>true</checkSizeAfterScaling>
            <secureImageUploads>true</secureImageUploads>
            <htmlExtensions>html,htm,xml,js</htmlExtensions>
            <forceASCII>false</forceASCII>
            <hideFolders>
                    <folder>.*</folder>
                    <folder>CVS</folder>
            </hideFolders>
            <hideFiles>
                    <file>.*</file>
            </hideFiles>
            <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>
                    <plugin>
                            <name>watermark</name>
                            <class>com.ckfinder.connector.plugins.Watermark</class>
                            <params>
                                    <param name="source" value="/plug-in/ckfinder/logo.png"></param>
                                    <param name="transparency" value="0.8"></param>
                                    <param name="quality" value="100"></param>
                                    <param name="marginRight" value="5"></param>
                                    <param name="marginBottom" value="5"></param>
                            </params>
                            <internal>true</internal>
                    </plugin>
            </plugins>
            <basePathBuilderImpl>com.ckfinder.connector.configuration.ConfigurationPathBuilder</basePathBuilderImpl>
    </config>

第六步：配置ckeditor config.js（ckfinder config.js不用配置）

CKEDITOR.editorConfig = function( config ) {

        config.filebrowserBrowseUrl = 'plug-in/ckfinder/ckfinder.html';
        config.filebrowserImageBrowseUrl = 'plug-in/ckfinder/ckfinder.html?type=Images';
        config.filebrowserFlashBrowseUrl = 'plug-in/ckfinder/ckfinder.html?type=Flash';
        config.filebrowserUploadUrl = 'plug-in/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files';
        config.filebrowserImageUploadUrl = 'plug-in/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images';
        config.filebrowserFlashUploadUrl = 'plug-in/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash';

        config.enterMode = CKEDITOR.ENTER_BR;// CKEDITOR.ENTER_P;CKEDITOR.ENTER_DIV
        config.format_p = { element: 'p', attributes: { 'style': 'text-indent:24.0pt;line-height:150%' } };
        config.font_style = { element   : 'span', styles   : { 'font-size' : '14.0pt;', 'line-height' : '200%;', 'font-family' : '宋體;' } };
        config.font_defaultLabel = '宋體';
        config.fontSize_defaultLabel = '12px';
        config.tabSpaces = 2;

        config.language = "zh-cn";
        config.image_previewText = ' '; // 預覽區域顯示內容
        config.font_names = '宋體/宋體;黑體/黑體;仿宋/仿宋_GB2312;楷體/楷體_GB2312;隸書/隸書;幼圓/幼圓;微軟雅黑/微軟雅黑;'
                        + config.font_names;
        config.skin = 'moonocolor';
        config.toolbarGroups = [
                { name: 'document',    groups: [ 'mode', 'document', 'doctools' ] },
                { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
            { name: 'insert' },{name:'font'},{ name: 'tools' },
            { name: 'others' },{ name: 'editing',     groups: [ 'find', 'selection' ] },
            { name: 'links' },{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup', 'font'] },
            { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align' ] },
            { name: 'forms' },{ name: 'styles' },{ name: 'colors' }];
};

第七步：破解ckfinder
第一處修改代碼(ckfinder/ckfinder.js)：
替換前：

var r="\074\x64\x69\x76\040\143\x6c\x61\x73\163\x3d\047\x76\x69\x65\x77\x20\x74\x6f\157\x6c\x5f\x70\x61\x6e\145\x6c\047\040\x73\x74\x79\x6c\145\075\047\x70\141\144\144\x69\156\x67\072\x32\160\x78\x3b\x64\x69\163\x70\x6c\x61\x79\x3a\142\154\x6f\143\x6b\040\041\x69\x6d\160\x6f\162\x74\141\156\x74\x3b\160\157\163\x69\164\x69\157\156\072\163\x74\x61\x74\x69\143\x20\x21\151\x6d\160\157\x72\164\x61\156\x74\x3b\x63\157\x6c\x6f\x72\x3a\x62\154\x61\x63\153\x20\041\151\155\x70\x6f\x72\164\x61\156\164\x3b\142\141\x63\153\147\162\157\165\x6e\144\055\143\x6f\x6c\157\x72\072\x77\150\151\x74\x65\040\041\151\155\160\x6f\162\x74\141\156\x74\x3b\x27\076",s="\074\057\x64\151\x76\076",t=r+"\124\x68\151\x73\x20\x69\x73\x20\x74\150\x65\040\104\x45\x4d\x4f\x20\x76\x65\x72\163\151\x6f\x6e\x20\x6f\146\040\x43\x4b\106\151\156\x64\x65\162\056\x20\x50\154\145\x61\163\x65\x20\166\151\163\x69\164\040\164\150\x65\040\074\141\x20\150\162\145\146\x3d\047\x68\164\164\160\x3a\x2f\x2f\x63\153\x73\157\x75\x72\x63\x65\x2e\x63\x6f\x6d\057\143\153\x66\x69\x6e\x64\145\x72\x27\x20\x74\141\162\x67\145\x74\075\x27\137\142\x6c\x61\156\153\x27\076\x43\x4b\x46\151\156\144\x65\162\040\167\145\142\x20\163\151\164\145\074\057\141\x3e\040\x74\x6f\040\157\142\164\141\151\156\040\141\x20\x76\141\154\x69\x64\040\154\151\143\x65\x6e\x73\x65\x2e"+s,u=r+"\103\x4b\x46\x69\x6e\144\145\162\040\104\x65\x76\145\154\157\160\x65\162\x20\114\x69\143\x65\156\163\x65\x3c\142\162\x2f\x3e\114\151\143\145\x6e\x73\x65\144\040\x74\x6f\072\x20";

替換後：

var r="\x20",s="\x20",t="\x20",u="\x20";

註解：這是刪除樹形菜單下方的廣告提示，刪除後便不會再出現廣告。

第二處修改代碼(ckfinder/ckfinder.js)：
替換前：

if((V.eu&& !aa||Z)&&V.mj)

替換後：
if((V.eu&& !aa||Z)&&V.mj&&V.mj!=O)

第三處修改代碼(ckeditor/pligins/pastefromword/filter/default.js)
查找 try{a=b.toHtml(a)}catch(d){alert(c.lang.pastefromword.error)}
註釋 /**try{a=b.toHtml(a)}catch(d){alert(c.lang.pastefromword.error)}**/

破解到此結束！

第八步：添加攔截器

在本身項目中新建一個類CkfinderConfiguration

package com.jcm.listener;//包名自定義

import javax.servlet.ServletConfig;

import com.ckfinder.connector.configuration.Configuration;

public class CkfinderConfiguration extends Configuration {

        String path = "";

        public CkfinderConfiguration(ServletConfig servletConfig) {
                super(servletConfig);
                path = servletConfig.getServletContext().getContextPath();
        }

        @Override
        public void init() throws Exception {
                super.init();
                this.baseURL = path + "/userfiles/";
        }

}

在web.xml中添加配置

 <!-- ckfinder配置 -->
        <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>
                <init-param>
<!-- 自定義攔截器 -->
                        <param-name>configuration</param-name>
                        <param-value>com.jcm.listener.CkfinderConfiguration</param-value>
                </init-param>
                <load-on-startup>2</load-on-startup>
        </servlet>
        <servlet-mapping>
                <servlet-name>ConnectorServlet</servlet-name>
                <url-pattern>/plug-in/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>/plug-in/ckfinder/core/connector/java/connector.java</url-pattern>
        </filter-mapping>
        <!-- ckfinder配置 END -->

第九步：爲登錄用戶添加權限
jeecg.system.controller.core.LoginController下login方法
找到request.setAttribute("roleName", roles);在這下面添加request.getSession().setAttribute("CKFinder_UserRole", "admin");
（能夠有更詳細的權限配置可詢問我或在QQ羣求助）

附件列表

• ckeditor_4.1.3_full.zip

• CKFinder.v2.4.1.完美註冊版.ha666.zip

原文地址：http://www.jianfangkk.com/webdesign/201609/328