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 的配置是必须的

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

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 标签下，

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，

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>

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