CKEditor4与CKFinder_2.3整合_for_java

CKEditor是我们喜爱的FCKeditor的一个完全重写版本，FCKeditor经过了6年的发展，取得了很大的成功。并不是说FCKeditor做的不好，而是我们可以带来更新的东西，CKEditor就是。在CKEditor上面，我们引入了几十个新特性。

CKEditor加载更快更方便使用。开发团队更加专注带来最佳的性能，使用各种现代的最佳做法。你会惊讶于他的表现。

您会注意到，他还有一个在Kama皮肤的基础上的一个全新的用户界面。Kama的丰富多彩就像变色龙一样，这样你就可以精确按您的需求匹配的颜色。这是一种创新的和独特的功能，你会发现只有在CKEditor才有。

CKEditor代码也与以前大大不同了。这取决于新的JavaScript开发的最新要求，提供了丰富而强大的集成和互动的API。该编辑器是完全基于插件的，他可以扩展和所有部件以符合所有需求。

第一步：工具下载：

1、下载CKEditor:

官网地址：http://ckeditor.com/

2、下载CKFinder:

    官网地址：http://cksource.com/ckfinder

第二步：整合CKEditor

   1、解压ckeditor_4.0.1_full.zip，在WebRoot下新建ckedtitor文件夹，把解压后的文件拷贝过来；

                  samples文件夹、CHANGES.md、LICENSE.md、README.md可以删掉，

                 其中lang文件夹下只保留en.js和zh-cn.js即可，plugins\a11yhelp\dialogs\lang文件夹下的也同样，删掉除en.js和zh-cn.js之外的文件。

         2、此外如果需要和Jquery整合，还需要adapters文件夹中的jquery.js，关于adapters文件夹在4.0.1版本中没有，在3.6.4版本for java 中可以下载到

         3、修改ckeditor文件夹下的config.js文件代码如下：

CKEDITOR.editorConfig = function( config ) {    // Define changes todefault configuration here. For example:    config.language = 'zh-cn'; //配置语言    //添加中文字体    config.font_names='宋体/宋体;黑体/黑体;仿宋/仿宋_GB2312;华文中宋/华文中宋;楷体/楷体_GB2312;隶书/隶书;幼圆/幼圆;微软雅黑/微软雅黑;'+ config.font_names;        // config.uiColor ='#FFF'; //背景颜色    // config.width = 400;    //宽度    // config.height = 400;    //高度    // config.skin = 'v2';    //编辑器皮肤样式    // 取消 “拖拽以改变尺寸”功能    //config.resize_enabled = false;    // 使用基础工具栏    // config.toolbar ="Basic";    // 使用全能工具栏    config.toolbar = "Full";    //使用自定义工具栏    // config.toolbar =    // [    // ['Source','Preview', '-'],        // ['Cut', 'Copy','Paste', 'PasteText', 'PasteFromWord', ],       // ['Undo', 'Redo','-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],    // ['Image', 'Flash','Table', 'HorizontalRule', 'Smiley', SpecialChar','PageBreak'],    // '/',        // ['Bold', 'Italic','Underline', '-', 'Subscript', 'Superscript'],        // ['NumberedList','BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'],        // ['JustifyLeft','JustifyCenter', 'JustifyRight', 'JustifyBlock'],        // ['Link', 'Unlink','Anchor'],       // '/',        // ['Format', 'Font','FontSize'],        // ['TextColor','BGColor'],        // ['Maximize','ShowBlocks', '-', 'About']        // ];       // 在 CKEditor 中集成 CKFinder注意 ckfinder 的路径选择要正确。        config.filebrowserBrowseUrl = '/ckfinder/ckfinder.html',       config.filebrowserImageBrowseUrl = '/ckfinder/ckfinder.html?type=Images',       config.filebrowserFlashBrowseUrl = '/ckfinder/ckfinder.html?type=Flash',       config.filebrowserUploadUrl = '/ckfinder/core/connector/asp/connector.asp?command=QuickUpload&type=Files',       config.filebrowserImageUploadUrl = '/ckfinder/core/connector/asp/connector.asp?command=QuickUpload&type=Images',       config.filebrowserFlashUploadUrl = '/ckfinder/core/connector/asp/connector.asp?command=QuickUpload&type=Flash',       config.filebrowserWindowWidth = '1000',  config.filebrowserWindowHeight = '700' ;};

 

    4、去掉默认的上传图片那一大段文字提示

打开plugins\image\dialogs\image.js

文件，找到

c.config.image_previewText||" Lorem ipsum dolor sit amet, consectetueradipiscing elit. Maecenas feugiat consequat diam. Maecenas metus. Vivamus diampurus, cursus a, commodo non, facilisis vitae, nulla. Aenean dictum laciniatortor. Nunc iaculis, nibh non iaculis aliquam, orci felis euismod neque, sedornare massa mauris sed velit. Nulla pretium mi et risus. Fusce mi pede, temporid, cursus ac, ullamcorper nec, enim. Sed tortor. Curabitur molestie. Duisvelit augue, condimentum at, ultrices a, luctus ut, orci. Donec pellentesqueegestas eros. Integer cursus, augue in cursus faucibus, eros pede bibendum sem,in tempus tellus justo quis ligula. Etiam eget tortor. Vestibulum rutrum, estut placerat elementum, lectus nisl aliquam velit, tempor aliquam eros nuncnonummy metus. In eros metus, gravida a, gravida sed, lobortis id, turpis. Utultrices, ipsum at venenatis fringilla, sem nulla lacinia tellus, eget aliquetturpis mauris non enim. Nam turpis. Suspendisse lacinia. Curabitur ac tortor utipsum egestas elementum. Nunc imperdiet gravida mauris."

 

这后面一大堆代码，改成c.config.image_previewText||"”

第三步 整合CKFinder

    1、解压ckfinder_java_2.3.zip，在WebRoot下新建ckfinder文件夹,在解压后的文件夹中找到ckfinder\_sources\CKFinder forJava\WebApp\src\main\webapp\ckfinder文件夹，拷贝到目标文件夹下；

3、samples文件夹、changelog.txt、install.txt、license.txt、translations.txt可以删掉， lang包中，删掉除en.js和zh-cn.js之外的文件；

4、解压ckeditor-java-3.6.4.war，把CKFinderJava\WEB-INF\lib下的

拷贝到项目的lib下。

5、把配置文件config.xml、web.xml也拷贝到WebRoot/WEB-INF下

打开config.xml第二行的<enabled>false</enabled>换成<enabled>true</enabled>第四行的<baseURL>/CKFinderJava/userfiles/</baseURL>换成

<baseURL>/你的项目名称/userfiles/</baseURL>

    6、配置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>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>

 

记得以上代码要写在spring和struts2之前.

    7、如果与struts2集成，需要改写filter

新建一个Struts2Filter类：

publicclassStruts2Filter extends StrutsPrepareAndExecuteFilter { @Override   publicvoid doFilter(ServletRequestreq, ServletResponse res, FilterChain fc)         throws IOException,ServletException {      HttpServletRequestrequest = (HttpServletRequest) req;      StringfilterURL = request.getRequestURI();      if ("/DRTS/ckfinder/core/connector/java/connector.java".equals(filterURL)) {         try {            fc.doFilter(req,res);         }catch(Exception e) {         }      }else{         super.doFilter(req, res, fc);      }   }}

 

在web.xml文件中

<!-- 定义Struts2的核心Filter -->   <filter>     <filter-name>struts2</filter-name>      <filter-class>         com.sssss.common.filter.Struts2Filter//类路径      </filter-class>   </filter>   <!--让Struts2的核心Filter拦截所有请求 -->  <filter-mapping>     <filter-name>struts2</filter-name>     <url-pattern>/*</url-pattern>  </filter-mapping>

 

8、破解

ckfinder/ckfinder.js删除三处js代码：

 第一处：删除

if(a.bF&&1==a.bs.indexOf(a.bF.substr(1,1))%5&&a.lS(J)!=a.lS(a.ed)||a.bF&&a.bF.substr(3,1)!=a.bs.substr((a.bs.indexOf(a.bF.substr(0,1))+a.bs.indexOf(a.bF.substr(2,1)))*9%(a.bs.length-1),1))x.app.msgDialog('',"\124\x68\x69\x73\040\x66\165\156\143\164\x69\157\x6e\040\x69\163\x20\x64\x69\163\141\142\x6c\x65\x64\x20\x69\156\040\x74\x68\x65\x20\144\145\x6d\x6f\x20\x76\145\x72\x73\x69\157\156\040\x6f\146\x20\103\113\x46\x69\156\x64\145\162\x2e\x3c\x62\162\x20\057\x3e\x50\x6c\145\x61\x73\x65\040\x76\x69\163\151\164\x20\x74\150\145\x20\x3c\x61\x20\150\x72\x65\x66\x3d\x27\x68\x74\x74\x70\x3a\x2f\057\x63\153\x66\x69\x6e\x64\x65\162\056\143\157\155\047\076\103\113\106\x69\x6e\144\x65\x72\x20\167\145\142\x20\163\x69\x74\x65\074\x2f\141\076\x20\x74\x6f\040\x6f\x62\x74\141\151\156\x20\x61\x20\x76\x61\x6c\x69\144\040\154\x69\x63\145\x6e\163\145\056");else

作用：图片可移动到其他文件夹

第二处：改成varp="\x20",q="\x20",r=p,s=p;

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

作用：图片列表左下角的信息就不见了。

第三处：修改

if((T.eu&& !Y||X)&&T.mj){V.addClass('files_message');this.tools.of().setHtml(T.mj);}

改成：

if((T.eu&&!Y||X)&&T.mj){V.addClass('files_message');if(T.mj==M)this.tools.of().hide();else{this.tools.of().setHtml(T.mj);this.tools.of().show()}}

作用：文件列表上方显示的Thisis the DEMO version of CKFinder. Please visit the CKFinder web site to obtain avalid license.将被隐藏，且不会隐藏其他提示。网上有建议直接隐藏<h4class="message_content"></h4>本人并不建议那样做。

 

第四步：在jsp页面中调用

1、在head中包含：

<script type="text/javascript" src="<%=basePath%>ckeditor/ckeditor.js"></script><script type="text/javascript"src="<%=basePath%>ckeditor/adapters/jquery.js"></script><script type="text/javascript"src="<%=basePath%>ckfinder/ckfinder.js"></script>

 

2、jsp页面html代码

   <div>      <textarea id="editor1" name="editor1"></textarea>   </div>

 

3、jquery方式调用

$("#editor1").ckeditor();

 

以上整合完毕，简单吧，希望与本文能对君有所帮助.