CkEditor 4.1.3 + CkFinder 2.4

Alexander

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

1.     <?xml version="1.0" encoding="UTF-8"?>
   
2.     <config>
   
3.             <enabled>true</enabled>
   
4.             <!---注意：必须改成自己项目的，不然上传图片找不到具体的网络路径 -->
   
5.             <baseDir></baseDir>
   
6.             <!---这里我没有直接配置，而是用拦截器的形式加载，后面会说到 -->
   
7.             <baseURL></baseURL>
   
8.             <licenseKey></licenseKey>
   
9.             <licenseName></licenseName>
   
10.             <imgWidth>10000</imgWidth>
    
11.             <imgHeight>10000</imgHeight>
    
12.             <imgQuality>80</imgQuality>
    
13.             <uriEncoding>UTF-8</uriEncoding>
    
14.             <defaultResourceTypes></defaultResourceTypes>
    
15.             <types>
    
16.                     <type name="Files">
    
17.                             <url>%BASE_URL%files/</url>
    
18.                             <directory>%BASE_DIR%files</directory>
    
19.                             <maxSize>0</maxSize>
    
20.                             <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
    
21.                             </allowedExtensions>
    
22.                             <deniedExtensions></deniedExtensions>
    
23.                     </type>
    
24.                     <type name="Images">
    
25.                             <url>%BASE_URL%images/</url>
    
26.                             <directory>%BASE_DIR%images</directory>
    
27.                             <maxSize>0</maxSize>
    
28.                             <allowedExtensions>bmp,gif,jpeg,jpg,png</allowedExtensions>
    
29.                             <deniedExtensions></deniedExtensions>
    
30.                     </type>
    
31.                     <type name="Flash">
    
32.                             <url>%BASE_URL%flash/</url>
    
33.                             <directory>%BASE_DIR%flash</directory>
    
34.                             <maxSize>0</maxSize>
    
35.                             <allowedExtensions>swf,flv</allowedExtensions>
    
36.                             <deniedExtensions></deniedExtensions>
    
37.                     </type>
    
38.             </types>
    
39.             <userRoleSessionVar>CKFinder_UserRole</userRoleSessionVar>
    
40.             <accessControls>
    
41.                     <accessControl>
    
42.                             <role>admin</role>
    
43.                             <resourceType>*</resourceType>
    
44.                             <folder>/</folder>
    
45.                             <folderView>true</folderView>
    
46.                             <folderCreate>true</folderCreate>
    
47.                             <folderRename>true</folderRename>
    
48.                             <folderDelete>true</folderDelete>
    
49.                             <fileView>true</fileView>
    
50.                             <fileUpload>true</fileUpload>
    
51.                             <fileRename>true</fileRename>
    
52.                             <fileDelete>true</fileDelete>
    
53.                     </accessControl>
    
54.             </accessControls>
    
55.             <thumbs>
    
56.                     <enabled>true</enabled>
    
57.                     <url>%BASE_URL%_thumbs/</url>
    
58.                     <directory>%BASE_DIR%_thumbs</directory>
    
59.                     <directAccess>false</directAccess>
    
60.                     <maxHeight>100</maxHeight>
    
61.                     <maxWidth>100</maxWidth>
    
62.                     <quality>80</quality>
    
63.             </thumbs>
    
64.             <disallowUnsafeCharacters>false</disallowUnsafeCharacters>
    
65.             <checkDoubleExtension>true</checkDoubleExtension>
    
66.             <checkSizeAfterScaling>true</checkSizeAfterScaling>
    
67.             <secureImageUploads>true</secureImageUploads>
    
68.             <htmlExtensions>html,htm,xml,js</htmlExtensions>
    
69.             <forceASCII>false</forceASCII>
    
70.             <hideFolders>
    
71.                     <folder>.*</folder>
    
72.                     <folder>CVS</folder>
    
73.             </hideFolders>
    
74.             <hideFiles>
    
75.                     <file>.*</file>
    
76.             </hideFiles>
    
77.             <plugins>
    
78.                     <plugin>
    
79.                             <name>imageresize</name>
    
80.                             <class>com.ckfinder.connector.plugins.ImageResize</class>
    
81.                             <params>
    
82.                                     <param name="smallThumb" value="90x90"></param>
    
83.                                     <param name="mediumThumb" value="120x120"></param>
    
84.                                     <param name="largeThumb" value="180x180"></param>
    
85.                             </params>
    
86.                     </plugin>
    
87.                     <plugin>
    
88.                             <name>fileeditor</name>
    
89.                             <class>com.ckfinder.connector.plugins.FileEditor</class>
    
90.                             <params></params>
    
91.                     </plugin>
    
92.                     <plugin>
    
93.                             <name>watermark</name>
    
94.                             <class>com.ckfinder.connector.plugins.Watermark</class>
    
95.                             <params>
    
96.                                     <param name="source" value="/plug-in/ckfinder/logo.png"></param>
    
97.                                     <param name="transparency" value="0.8"></param>
    
98.                                     <param name="quality" value="100"></param>
    
99.                                     <param name="marginRight" value="5"></param>
    
100.                                     <param name="marginBottom" value="5"></param>
     
101.                             </params>
     
102.                             <internal>true</internal>
     
103.                     </plugin>
     
104.             </plugins>
     
105.             <basePathBuilderImpl>com.ckfinder.connector.configuration.ConfigurationPathBuilder</basePathBuilderImpl>
     
106.     </config>

复制代码

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

1. CKEDITOR.editorConfig = function( config ) {
   
2. 
   
3.         config.filebrowserBrowseUrl = 'plug-in/ckfinder/ckfinder.html';
   
4.         config.filebrowserImageBrowseUrl = 'plug-in/ckfinder/ckfinder.html?type=Images';
   
5.         config.filebrowserFlashBrowseUrl = 'plug-in/ckfinder/ckfinder.html?type=Flash';
   
6.         config.filebrowserUploadUrl = 'plug-in/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files';
   
7.         config.filebrowserImageUploadUrl = 'plug-in/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images';
   
8.         config.filebrowserFlashUploadUrl = 'plug-in/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash';
   
9. 
   
10.         config.enterMode = CKEDITOR.ENTER_BR;// CKEDITOR.ENTER_P;CKEDITOR.ENTER_DIV
    
11.         config.format_p = { element: 'p', attributes: { 'style': 'text-indent:24.0pt;line-height:150%' } };
    
12.         config.font_style = { element   : 'span', styles   : { 'font-size' : '14.0pt;', 'line-height' : '200%;', 'font-family' : '宋体;' } };
    
13.         config.font_defaultLabel = '宋体';
    
14.         config.fontSize_defaultLabel = '12px';
    
15.         config.tabSpaces = 2;
    
16. 
    
17.         config.language = "zh-cn";
    
18.         config.image_previewText = ' '; // 预览区域显示内容
    
19.         config.font_names = '宋体/宋体;黑体/黑体;仿宋/仿宋_GB2312;楷体/楷体_GB2312;隶书/隶书;幼圆/幼圆;微软雅黑/微软雅黑;'
    
20.                         + config.font_names;
    
21.         config.skin = 'moonocolor';
    
22.         config.toolbarGroups = [
    
23.                 { name: 'document',    groups: [ 'mode', 'document', 'doctools' ] },
    
24.                 { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
    
25.             { name: 'insert' },{name:'font'},{ name: 'tools' },
    
26.             { name: 'others' },{ name: 'editing',     groups: [ 'find', 'selection' ] },
    
27.             { name: 'links' },{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup', 'font'] },
    
28.             { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align' ] },
    
29.             { name: 'forms' },{ name: 'styles' },{ name: 'colors' }];
    
30. };
    

复制代码

Alexander

第七步：破解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

1. package com.jcm.listener;//包名自定义
   
2. 
   
3. import javax.servlet.ServletConfig;
   
4. 
   
5. import com.ckfinder.connector.configuration.Configuration;
   
6. 
   
7. public class CkfinderConfiguration extends Configuration {
   
8. 
   
9.         String path = "";
   
10. 
    
11.         public CkfinderConfiguration(ServletConfig servletConfig) {
    
12.                 super(servletConfig);
    
13.                 path = servletConfig.getServletContext().getContextPath();
    
14.         }
    
15. 
    
16.         @Override
    
17.         public void init() throws Exception {
    
18.                 super.init();
    
19.                 this.baseURL = path + "/userfiles/";
    
20.         }
    
21. 
    
22. }
    

复制代码

在web.xml中添加配置

1.         <!-- ckfinder配置 -->
   
2.         <servlet>
   
3.                 <servlet-name>ConnectorServlet</servlet-name>
   
4.                 <servlet-class>com.ckfinder.connector.ConnectorServlet</servlet-class>
   
5.                 <init-param>
   
6.                         <param-name>XMLConfig</param-name>
   
7.                         <param-value>/WEB-INF/config.xml</param-value>
   
8.                 </init-param>
   
9.                 <init-param>
   
10.                         <param-name>debug</param-name>
    
11.                         <param-value>false</param-value>
    
12.                 </init-param>
    
13.                 <init-param>
    
14. <!-- 自定义拦截器 -->
    
15.                         <param-name>configuration</param-name>
    
16.                         <param-value>com.jcm.listener.CkfinderConfiguration</param-value>
    
17.                 </init-param>
    
18.                 <load-on-startup>2</load-on-startup>
    
19.         </servlet>
    
20.         <servlet-mapping>
    
21.                 <servlet-name>ConnectorServlet</servlet-name>
    
22.                 <url-pattern>/plug-in/ckfinder/core/connector/java/connector.java</url-pattern>
    
23.         </servlet-mapping>
    
24.         <filter>
    
25.                 <filter-name>FileUploadFilter</filter-name>
    
26.                 <filter-class>com.ckfinder.connector.FileUploadFilter</filter-class>
    
27.                 <init-param>
    
28.                         <param-name>sessionCookieName</param-name>
    
29.                         <param-value>jsessionid</param-value>
    
30.                 </init-param>
    
31.                 <init-param>
    
32.                         <param-name>sessionParameterName</param-name>
    
33.                         <param-value>JSESSIONID</param-value>
    
34.                 </init-param>
    
35.         </filter>
    
36.         <filter-mapping>
    
37.                 <filter-name>FileUploadFilter</filter-name>
    
38.                 <url-pattern>/plug-in/ckfinder/core/connector/java/connector.java</url-pattern>
    
39.         </filter-mapping>
    
40.         <!-- ckfinder配置 END -->

复制代码

第九步：为登陆用户添加权限
jeecg.system.controller.core.LoginController下login方法
找到request.setAttribute("roleName", roles);在这下面添加request.getSession().setAttribute("CKFinder_UserRole", "admin");
（可以有更详细的权限配置可询问我或在QQ群求助）

Alexander

最后，使用！
在要使用此编辑器的jsp中
添加 <script type="text/javascript" src="plug-in/ckeditor/ckeditor.js"></script>
        <script type="text/javascript" src="plug-in/ckfinder/ckfinder.js"></script>
        若页面未添加jquery，还需添加jquery，1.5以上版本为宜
        <t:base type="jquery"></t:base>代表已添加

1. <script type="text/javascript">
   
2.         var indexs = 0;
   
3.         $(function() {
   
4.                 $("#btn_sub").click(   //btn_sub是jeecg修改页面默认的提交ID
   
5.                         function() {
   
6.                                 CKupdate();
   
7.                         });
   
8.         });
   
9.         function CKupdate() {
   
10.                 for (instance in CKEDITOR.instances) {
    
11.                         var ins = CKEDITOR.instances[instance];
    
12.                         ins.setData(ins.getData().replace(new RegExp("\r\n", "g"), ""));
    
13.                         ins.updateElement();
    
14.                 }
    
15.         }
    
16.         function browseServer(inputId, Img) { //此方法是独立使用ckfinder所使用的
    
17.                 var finder = new CKFinder();
    
18.                 finder.selectActionFunction = function(fileUrl, data) {//设置文件被选中时的函数
    
19.                         $("#" + Img).attr("src", fileUrl);
    
20.                         $("#" + inputId).attr("value", fileUrl);
    
21.                         $("#" + Img).attr("hidden", false);
    
22.                 };
    
23.                 finder.selectActionData = inputId; //接收地址的input ID
    
24.                 finder.popup();
    
25.         }
    
26. </script>

复制代码

Alexander

独立使用ckfinder实例（参考）

1. <tr>
   
2. <td style="text-align: right;"><label class="Validform_label">活动标题图片:</label></td>
   
3. <td class="value"><c:choose>
   
4.          <c:when test="${competitionPage.activitiesCover == '' || competitionPage.activitiesCover == NULL }">
   
5.                    <img alt="" src="" width="100" height="60" hidden="hidden" id="imgNews" />
   
6.                    <input type="hidden" id="activitiesCover" name="activitiesCover" value="${competitionPage.activitiesCover}">
   
7.           </c:when>
   
8.           <c:otherwise>
   
9.                    <img alt="" src="${competitionPage.activitiesCover}" width="100" height="60" id="imgNews" />
   
10.                    <input type="hidden" id="activitiesCover" name="activitiesCover" value="${competitionPage.activitiesCover}">
    
11.           </c:otherwise>
    
12. </c:choose>
    
13. <input class="ui-button" type="button" value="上传标题图片" onclick="browseServer('activitiesCover','imgNews')"></td>
    
14. </tr>

复制代码

使用ckeditor+ckfinder实例

1. <tr>
   
2. <td style="text-align: right;"><label class="Validform_label">活动说明:</label></td>
   
3. <td class="value"><textarea id="activitiesGeneralInformation"
   
4. name="activitiesGeneralInformation">${competitionPage.activitiesGeneralInformation}</textarea>
   
5. <script type="text/javascript">
   
6.           var ckeditor = CKEDITOR.replace(
   
7.                     "activitiesGeneralInformation", {
   
8.                               width : 750
   
9.           });
   
10.           CKFinder.SetupCKEditor(ckeditor);
    
11. </script></td>
    
12. </tr>

复制代码

到处结束，有问题找我

jueyue

顶起

GIN

勃起。。

wu_sir

Alexander 发表于 2013-9-17 10:37
独立使用ckfinder实例（参考）使用ckeditor+ckfinder实例到处结束，有问题找我

...

您好，我现在要单独使用ckfinder，已破解。有一个权限的问题：
<accessControl>
                        <resourceType>*</resourceType>
                        <folder>/</folder>
</accessControl>
我这两个参数里面随便改个值页面ckfinder.js就会报一个name参数不存在的错，我以为是破解的时候把js改坏了，但是用原来的js替换回去也是这样。你这边能测试一下吗，或者给我一个你破解的ckfinder.js。万分感谢。

wu_sir

wu_sir 发表于 2013-10-21 17:36
您好，我现在要单独使用ckfinder，已破解。有一个权限的问题：

                        *

已解决。