首页 > 代码库 > ckeditor4.5.11+ckfinder_java2.6.2配置

ckeditor4.5.11+ckfinder_java2.6.2配置

http://blog.csdn.net/skyman1942/article/details/52537100

 

1、环境说明:

日期:2016-09-14

工具:ckeditor_4.5.11+ckfinder_java_2.6.2

环境:i5-3210m,8g ddr3,win10 x64,jdk1.8  x64

开发工具:eclipse neon x64(可能用到的web插件此处不再赘述)

 

2、工具包:

ckeditor_4.5.11_full.zip,ckfinder_java_2.6.2.zip,ckeditor-java-core-3.5.3.zip,三个压缩包都可在官网下载到。

 

3、把工具引入web工程

(1)ckeditor

ckeditor_4.5.11_full.zip 解压得到的 ckeditor 目录,它的结构如下:
技术分享
把 ckeditor 复制到 web 工程下 WebContent 目录

(4)ckfinder

ckfinder_java_2.6.2.zip 解压,得到的目录里有个 CKFinderJava-2.6.2.war,解压这个 war 到某个目录下,它的结构如下:
技术分享
把 ckfinder 目录复制到 web 工程下 WebContent 目录,
把 WEB-INF 目录下的 config.xml 复制到web工程下 WebContent/WEB-INF/ 目录下,并改名成 ckfinder.xml 以区别其他 xml 配置文件

(5)jar包引入

1)步骤(4)中 war 解压目录下,WEB-INF/lib 目录下的所有 jar 包复制到 web工程的 WebContent/WEB-INF/lib 目录;
2)ckeditor-java-core-3.5.3.zip 解压得到一个目录,ckeditor-java-core-3.5.3.jar 复制到 web工程的 WebContent/WEB-INF/lib 目录。
 
到这里, web 工程 WebContent 目录结构如下图:
技术分享

(6)工具包精简(在工程中)

ckeditor:

lang 目录存放国际化文件,通常只保留 en.js 和 zh-cn.js ;

samples 目录存放的是实例,删除该目录;

3个 md 后缀的文件删除。

ckfinder:

_samples 目录删除;

help 目录删除;

lang 语言文件,保留 en.js 和 zh-cn.js;

4个 txt 文本删除。

(注意:还可以进一步精简,请参考其他教程)

4、配置 ckeditor 的 config.js 文件(在工程中)

打开 ckeditor 目录下的 config.js;
以下是一个参考,其中关于 ckfinder 的配置是必须的
[html] view plain copy
 
  1. CKEDITOR.editorConfig = function( config ) {  
  2.     // Define changes to default configuration here. For example:  
  3.     // config.language = ‘fr‘;  
  4.      config.uiColor = ‘#FF0000‘;  
  5.       
  6.     /*  
  7.      config.toolbar_Full = [  
  8.                             [‘Source‘,‘-‘,‘Save‘,‘NewPage‘,‘Preview‘,‘-‘,‘Templates‘],  
  9.                             [‘Cut‘,‘Copy‘,‘Paste‘,‘PasteText‘,‘PasteFromWord‘,‘-‘,‘Print‘, ‘SpellChecker‘, ‘Scayt‘],  
  10.                             [‘Undo‘,‘Redo‘,‘-‘,‘Find‘,‘Replace‘,‘-‘,‘SelectAll‘,‘RemoveFormat‘],  
  11.                             [‘Form‘, ‘Checkbox‘, ‘Radio‘, ‘TextField‘, ‘Textarea‘, ‘Select‘, ‘Button‘, ‘ImageButton‘, ‘HiddenField‘],  
  12.                             ‘/‘,  
  13.                             [‘Bold‘,‘Italic‘,‘Underline‘,‘Strike‘,‘-‘,‘Subscript‘,‘Superscript‘],  
  14.                              [‘NumberedList‘,‘BulletedList‘,‘-‘,‘Outdent‘,‘Indent‘,‘Blockquote‘],  
  15.                              [‘JustifyLeft‘,‘JustifyCenter‘,‘JustifyRight‘,‘JustifyBlock‘],  
  16.                              [‘Link‘,‘Unlink‘,‘Anchor‘],  
  17.                             [‘Image‘,‘Flash‘,‘Table‘,‘HorizontalRule‘,‘Smiley‘,‘SpecialChar‘,‘PageBreak‘],  
  18.                             ‘/‘,  
  19.                              [‘Styles‘,‘Format‘,‘Font‘,‘FontSize‘],  
  20.                              [‘TextColor‘,‘BGColor‘]  
  21.                          ];  
  22.                          */  
  23.     //取消编辑框拖拽缩放  
  24.     config.resize_enabled=false;  
  25.     filebrowserBrowseUrl = ‘/ckfinder/ckfinder.html‘;  
  26.     filebrowserImageBrowseUrl = ‘/ckfinder/ckfinder.html?type=Images‘;  
  27.     filebrowserFlashBrowseUrl = ‘/ckfinder/ckfinder.html?type=Flash‘;  
  28.     filebrowserUploadUrl = ‘/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files‘;  
  29.     filebrowserImageUploadUrl = ‘/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images‘;  
  30.     filebrowserFlashUploadUrl = ‘/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash‘;  
  31. };  
5、配置 ckfinder.xml

打开 WEB-INF 目录下的 ckfinder.xml。

1)<enabled>true</enabled>,true表示开启cfinder。

2)<baseURL>http://localhost:8080/model2message/upload/</baseURL>,这个标签指定上传文件的存放目录,

       tomcat服务器访问地址 + 工程名 + 接收文件夹+"/",我在项目的发布路径下创建了一个 upload 目录,所以是这个访问路径。

3)用户访问权限的设置在 accessControls 标签下,

[html] view plain copy
 
  1. <accessControls>  
  2.         <accessControl>  
  3.             <role>*</role>  
  4.             <resourceType>*</resourceType>  
  5.             <folder>/</folder>  
  6.             <folderView>true</folderView>  
  7.             <folderCreate>true</folderCreate>  
  8.             <folderRename>true</folderRename>  
  9.             <folderDelete>false</folderDelete>  
  10.             <fileView>true</fileView>  
  11.             <fileUpload>true</fileUpload>  
  12.             <fileRename>true</fileRename>  
  13.             <fileDelete>false</fileDelete>  
  14.         </accessControl>  
  15. </accessControls>  

 

6、配置 web.xml

可以参考步骤 3-(4)中war的解压目录下的 WEB-INF 目录下的 web.xml,

[html] view plain copy
 
  1. <servlet>  
  2.         <servlet-name>ConnectorServlet</servlet-name>  
  3.         <servlet-class>com.ckfinder.connector.ConnectorServlet</servlet-class>  
  4.         <init-param>  
  5.             <param-name>XMLConfig</param-name>  
  6.             <span style="color:#ff0000;"><param-value>/WEB-INF/ckfinder.xml</param-value><!--ckfinder.xml是config.xml改名之后--></span>  
  7.         </init-param>  
  8.         <init-param>  
  9.             <param-name>debug</param-name>  
  10.             <param-value>false</param-value>  
  11.         </init-param>  
  12.         <load-on-startup>1</load-on-startup>  
  13.     </servlet>  
  14.     <servlet-mapping>  
  15.         <servlet-name>ConnectorServlet</servlet-name>  
  16.         <url-pattern>/ckfinder/core/connector/java/connector.java</url-pattern>  
  17.     </servlet-mapping>  
7、在 jsp 页面上使用

这里使用标签创建。

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

 

注意ckfinder标签要放在ckeditor标签之前。

<cf:setupCKEditor editor="ed1" basePath="/model2message/ckfinder/" />
<ce:editor editor="ed1" basePath="/model2message/ckeditor/"></ce:editor>

 

技术分享

技术分享

技术分享

 

 

技术分享

 

注:以上简单配置,需要实现更多功能,请参考其他教程,感谢留言。

 

 

ckeditor4.5.11+ckfinder_java2.6.2配置