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
- CKEDITOR.editorConfig = function( config ) {
- // Define changes to default configuration here. For example:
- // config.language = 'fr';
- config.uiColor = '#FF0000';
- /*
- config.toolbar_Full = [
- ['Source','-','Save','NewPage','Preview','-','Templates'],
- ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
- ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
- ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
- '/',
- ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
- ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
- ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
- ['Link','Unlink','Anchor'],
- ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
- '/',
- ['Styles','Format','Font','FontSize'],
- ['TextColor','BGColor']
- ];
- */
- //取消编辑框拖拽缩放
- config.resize_enabled=false;
- filebrowserBrowseUrl = '/ckfinder/ckfinder.html';
- filebrowserImageBrowseUrl = '/ckfinder/ckfinder.html?type=Images';
- filebrowserFlashBrowseUrl = '/ckfinder/ckfinder.html?type=Flash';
- filebrowserUploadUrl = '/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files';
- filebrowserImageUploadUrl = '/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images';
- filebrowserFlashUploadUrl = '/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash';
- };
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
- <accessControls>
- <accessControl>
- <role>*</role>
- <resourceType>*</resourceType>
- <folder>/</folder>
- <folderView>true</folderView>
- <folderCreate>true</folderCreate>
- <folderRename>true</folderRename>
- <folderDelete>false</folderDelete>
- <fileView>true</fileView>
- <fileUpload>true</fileUpload>
- <fileRename>true</fileRename>
- <fileDelete>false</fileDelete>
- </accessControl>
- </accessControls>
6、配置 web.xml
可以参考步骤 3-(4)中war的解压目录下的 WEB-INF 目录下的 web.xml,
[html] view plain copy
- <servlet>
- <servlet-name>ConnectorServlet</servlet-name>
- <servlet-class>com.ckfinder.connector.ConnectorServlet</servlet-class>
- <init-param>
- <param-name>XMLConfig</param-name>
- <span style="color:#ff0000;"><param-value>/WEB-INF/ckfinder.xml</param-value><!--ckfinder.xml是config.xml改名之后--></span>
- </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>
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配置 的全部内容, 来源链接: utcz.com/z/394844.html