1. 下载好ckeditor和ckfinder插件。地址:http://ckeditor.com/download 和http://ckfinder.com/download
?
2. 解压ckeditor和ckfinder,把ckeditor和ckfinder放在同一个文件夹里面,如下图
?
?3. 修改ckeditor中的配置(ckeditor文件夹中的config.js)
,集成ckfinder的上传功能,把以下代码放入配置中://配置默认配置
?config.language = 'zh-cn'; //配置语言
?// 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 的路径选择要正确。 ( CKEditor与CKFinder均放在WebRoot目录下,则将Fckeditor改为..)
?config.filebrowserBrowseUrl = 'Fckeditor/ckfinder/ckfinder.html',
?config.filebrowserImageBrowseUrl = 'Fckeditor/ckfinder/ckfinder.html?type=Images',
?config.filebrowserFlashBrowseUrl = 'Fckeditor/ckfinder/ckfinder.html?type=Flash',
?config.filebrowserUploadUrl = 'Fckeditor/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files',
?config.filebrowserImageUploadUrl = 'Fckeditor/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images',
?config.filebrowserFlashUploadUrl = 'Fckeditor/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash',
?config.filebrowserWindowWidth = '1000',
??config.filebrowserWindowHeight = '700'
?config.language = 'zh-cn'; //配置语言
?// 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 的路径选择要正确。 ( CKEditor与CKFinder均放在WebRoot目录下,则将Fckeditor改为..)
?config.filebrowserBrowseUrl = 'Fckeditor/ckfinder/ckfinder.html',
?config.filebrowserImageBrowseUrl = 'Fckeditor/ckfinder/ckfinder.html?type=Images',
?config.filebrowserFlashBrowseUrl = 'Fckeditor/ckfinder/ckfinder.html?type=Flash',
?config.filebrowserUploadUrl = 'Fckeditor/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files',
?config.filebrowserImageUploadUrl = 'Fckeditor/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images',
?config.filebrowserFlashUploadUrl = 'Fckeditor/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash',
?config.filebrowserWindowWidth = '1000',
??config.filebrowserWindowHeight = '700'
?
4. 页面调用
?先引入ckeditor和ckfinder的js文件
??? <script type="text/javascript" src="Fckeditor/ckeditor/ckeditor.js"></script>
??? <script type="text/javascript" src="Fckeditor/ckfinder/ckfinder.js"></script>
??? <script type="text/javascript" src="Fckeditor/ckfinder/ckfinder.js"></script>
然后利用标签显示
<textarea id="editor1" name="editor1" class="ckeditor" rows="10" cols="80"> </textarea>
注: 是为了防止IE9出现页面异常,经过测试发现IE9出现乱跳转问题。
?
5. ?去水印的方法
一共有两处需要去掉水印
?第1处水印可以通过隐藏进行处理,打开ckfinder下面的ckfinder.js文件,查找<h4,此标签上添加隐藏样式style='display:none;'及隐藏该水印。
第2处水印可以通过把水印信息提示置空进行处理,打开ckfinder下面的ckfinder.js文件,查找\x3c\144会找到相应16禁止ASCII编码,如下:
?把此处的ASCII编码进行删除就可以了,注意,不是变成p="",而是var p="\x20";
至此,ckeditor3.5.3+ckfinder2.0.2+Java已经配置完毕。
?
?
?
附录:
没有struts2,则web.xml内容如下:
<?xml version="1.0" encoding="UTF-8"?> <web-app id="WebApp_ID" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"> <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> </web-app>?
?
与struts2的整合关键是web.xml与struts.xml文件的变化。
?
有两种方案:
方案一:
web.xml内容为:
<?xml version="1.0" encoding="UTF-8"?> <web-app id="WebApp_ID" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"> <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> <filter> <filter-name>struts2</filter-name> <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class> <!-- <init-param> <param-name>config</param-name> <param-value>../struts-xml/struts.xml</param-value> </init-param> --> </filter> <filter-mapping> <filter-name>struts2</filter-name> <url-pattern>*.action</url-pattern> </filter-mapping> ? </web-app>
?方案二:(推荐)
web.xml内容为:
<?xml version="1.0" encoding="UTF-8"?> <web-app id="WebApp_ID" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"> <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> <filter> <filter-name>struts2</filter-name> <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class> <!-- <init-param> <param-name>config</param-name> <param-value>../struts-xml/struts.xml</param-value> </init-param> --> </filter> <filter-mapping> <filter-name>struts2</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> </web-app>?
?
同时,在strutsmxl添加一句话:
<constant name="struts.action.excludePattern" value="/ckfinder.*"/>?
?
?
?
?
感谢:
Ckeditor+Ckfinder+Java集成 ?
ckeditor&ckfinder&s2sh集成
?
?
?