ckeditor和ckfinder整合
一、下载必须的jar包
1、ckeditor_3.6.2.zip
2、ckeditor-java-3.6.2.war
3、ckfinder_java_2.1.zip
二、myeclipse引入jar包
位置:
插入java代码到src目录
引入js文件到WEB-ROOT
导入config.xml文件到WEB-INFO文件下
修改 config.xml
1、<enabled>false</enabled>
当前限制上传功能
2、<baseURL>/Elec/userfiles/</baseURL>
设置文件保存目录
3、
<types>
<type name="Files">
<url>/Elec%BASE_URL%files/</url>该处必须加入项目名/Elec
<directory>%BASE_DIR%files</directory>
<maxSize>0</maxSize>
修改ckeditor文件夹下面的config.xml
1 /* 2 Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved. 3 For licensing, see LICENSE.html or http://ckeditor.com/license 4 */ 5 6 CKEDITOR.editorConfig = function( config ) 7 { 8 // Define changes to default configuration here. For example: 9 // config.language = 'fr'; 10 // config.uiColor = '#AADC6E'; 11 12 13 //config.language = 'zh-cn'; // 配置语言 14 // 15 // config.uiColor = '#fff'; // 背景颜色 16 // 17 //config.width = '800px'; // 宽度 18 19 //config.height = '300px'; // 高度 20 // 21 // config.skin = 'office2003';// v2,kama,office2003(界面的皮肤) 22 // 23 // config.toolbar = 'Full';// 工具栏风格Full,Basic 24 // 25 // config.font_names='宋体/宋体;黑体/黑体;仿宋/仿宋_GB2312;楷体/楷体_GB2312;' + 26 // '隶书/隶书;幼圆/幼圆;微软雅黑/微软雅黑;'+ config.font_names; 27 28 // config.htmlEncodeOutput = true; 29 //config.startupOutlineBlocks = false; 30 31 //配置默认配置 32 config.language = 'zh-cn'; //配置语言 33 config.uiColor = '#FFF'; //背景颜色 34 config.width = 800; //宽度 35 config.height = 200; //高度 36 config.skin = 'office2003'; //编辑器皮肤样式 37 // 取消 “拖拽以改变尺寸”功能 38 config.resize_enabled = false; 39 // 使用基础工具栏 40 //config.toolbar = "Basic"; 41 // 使用全能工具栏 42 //config.toolbar = "Full"; 43 //使用自定义工具栏 44 config.toolbar = 45 [ 46 ['Source', '-'], 47 ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', ], 48 ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'], 49 ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar','PageBreak'], 50 '/', 51 ['Bold', 'Italic', 'Underline', '-', 'Subscript', 'Superscript'], 52 ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'], 53 ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'], 54 ['Link', 'Unlink', 'Anchor'], 55 '/', 56 ['Format', 'Font', 'FontSize'], 57 ['TextColor', 'BGColor'], 58 ['Maximize', 'ShowBlocks', '-', 'About'] 59 ]; 60 61 62 /*** 文件上传功能的配置----------------------- 63 */ 64 config.filebrowserBrowseUrl = '../ckfinder/ckfinder.html'; 65 config.filebrowserImageBrowseUrl = '../ckfinder/ckfinder.html?type=Images'; 66 config.filebrowserFlashBrowseUrl = '../ckfinder/ckfinder.html?type=Flash'; 67 config.filebrowserUploadUrl = '../ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files'; 68 config.filebrowserImageUploadUrl = '../ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images'; 69 config.filebrowserFlashUploadUrl = '../ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash'; 70 };
修改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>
插入到项目的web.xml中
引用ckeditor和ckfinder的js
<script language="javascript" src="${pageContext.request.contextPath }/ckfinder/ckfinder.js"></script> <script language="javascript" src="${pageContext.request.contextPath }/ckeditor/ckeditor.js"></script>
引用script替换texterea
<script type="text/javascript"> CKEDITOR.replace("stationRun"); </script>