ckeditor和ckfinder集成详细配置及其优化

1、下载文件目录结构分析

ckeditor和ckfinder的下载网址分别是：

ckeditor：http://ckeditor.com/

ckfinder：http://cksource.com/ckfinder

下载下来后的目录结构：

ckeditor：

精简：

1.samples文件夹，这是示例文件，可删除；

2.adapters文件夹，这个应该是和第三方的东西配合使用的一下文件，可删除；

3.lang文件夹，语言包，根据需要删减(保留en.js和zh-cn.js即可)；

4.plugins文件夹，提供编辑器的功能，有用的留下，根据需要删减；

5.skins文件夹，皮肤文件夹，根据需要删减；

6.CHANGES.md文件，更新记录，可删除；

7. README.md，安装说明文档，可删除；

8. LICENSE.md，版权文档，可删除；

ckfinder：

（下载文件下加压后的ckfinder文件夹ckfinder\CKFinderJava-2.4.3\ckfinder）

精简：

1._samples文件夹，这是示例文件，可删除；

2.help文件夹，可删除；

3.lang文件夹，语言包，根据需要删减(保留en.js和zh-cn.js即可)；

4.plugins文件夹，提供编辑器的功能，有用的留下，根据需要删减；

5.skins文件夹，皮肤文件夹，根据需要删减；

6.changelog.txt文件，更新记录，可删除；

7. install.txt，安装说明文档，可删除；

8. license.txt，版权文档，可删除；

2、ckeditor配置在项目中

第一步：

将精简版后的ckeditor复制到webContent的目录下，并进行config.js的相关配置

config.js详细配置

    // 界面语言，默认为 'en'    config.language = 'zh-cn';    // 设置宽高    config.width = 400;    config.height = 400;    // 编辑器样式，有三种：'kama'（默认）、'office2003'、'v2'    config.skin = 'v2';    // 背景颜色    config.uiColor = '#FFF';    // 工具栏（基础'Basic'、全能'Full'、自定义）ckeditor/ckeditor.js    config.toolbar = 'Basic';    config.toolbar = 'Full';    // 这将配合：    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.toolbarCanCollapse = true;    // 工具栏的位置    config.toolbarLocation = 'top';// 可选：bottom    // 工具栏默认是否展开    config.toolbarStartupExpanded = true;    // 取消 “拖拽以改变尺寸”功能 plugins/resize/plugin.js    config.resize_enabled = false;    // 改变大小的最大高度    config.resize_maxHeight = 3000;    // 改变大小的最大宽度    config.resize_maxWidth = 3000;    // 改变大小的最小高度    config.resize_minHeight = 250;    // 改变大小的最小宽度    config.resize_minWidth = 750;    // 当提交包含有此编辑器的表单时，是否自动更新元素内的数据    config.autoUpdateElement = true;    // 设置是使用绝对目录还是相对目录，为空为相对目录    config.baseHref = '';    // 编辑器的z-index值    config.baseFloatZIndex = 10000;    // 设置快捷键    config.keystrokes = [    [ CKEDITOR.ALT + 121 , 'toolbarFocus' ], // 获取焦点    [ CKEDITOR.ALT + 122 , 'elementsPathFocus' ], // 元素焦点           [ CKEDITOR.SHIFT + 121 , 'contextMenu' ], // 文本菜单           [ CKEDITOR.CTRL + 90 , 'undo' ], // 撤销    [ CKEDITOR.CTRL + 89 , 'redo' ], // 重做    [ CKEDITOR.CTRL + CKEDITOR.SHIFT + 90 , 'redo' ], //            [ CKEDITOR.CTRL + 76 , 'link' ], // 链接            [ CKEDITOR.CTRL + 66 , 'bold' ], // 粗体    [ CKEDITOR.CTRL + 73 , 'italic' ], // 斜体    [ CKEDITOR.CTRL + 85 , 'underline' ], // 下划线            [ CKEDITOR.ALT + 109 , 'toolbarCollapse' ]    ],    // 设置快捷键 可能与浏览器快捷键冲突 plugins/keystrokes/plugin.js.    config.blockedKeystrokes = [CKEDITOR.CTRL + 66 ,CKEDITOR.CTRL + 73 ,CKEDITOR.CTRL + 85],    // 设置编辑内元素的背景色的取值 plugins/colorbutton/plugin.js.config.colorButton_backStyle = {    element : 'span',    styles : { 'background-color' : '#(color)' }    };    // 设置前景色的取值 plugins/colorbutton/plugin.js    // config.colorButton_colors =    // '000,800000,8B4513,2F4F4F,008080,000080,4B0082,696969,B22222,A52A2A,DAA520,006400,40E0D0,0000CD,800080,808080,F00,FF8C00,FFD700,008000,0FF,00F,EE82EE,A9A9A9,FFA07A,FFA500,FFFF00,00FF00,AFEEEE,ADD8E6,DDA0DD,D3D3D3,FFF0F5,FAEBD7,FFFFE0,F0FFF0,F0FFFF,F0F8FF,E6E6FA,FFF’;    // 是否在选择颜色时显示“其它颜色”选项 plugins/colorbutton/plugin.js    config.colorButton_enableMore = false;    // 区块的前景色默认值设置 plugins/colorbutton/plugin.js    config.colorButton_foreStyle = {    element : 'span',    styles : { 'color' : '#(color)' }    };    // 所需要添加的CSS文件 在此添加 可使用相对路径和网站的绝对路径    config.contentsCss = './contents.css';    // 文字方向    config.contentsLangDirection = 'rtl'; // 从左到右    // CKeditor的配置文件 若不想配置 留空即可    CKEDITOR.replace( 'myfiled', { customConfig : './config.js' } );    // 界面编辑框的背景色 plugins/dialog/plugin.js    config.dialog_backgroundCoverColor = 'rgb(255, 254, 253)'; // 可设置参考    config.dialog_backgroundCoverColor = 'white'; // 默认    // 背景的不透明度 数值应该在：0.0～1.0 之间 plugins/dialog/plugin.js    config.dialog_backgroundCoverOpacity = 0.5;    // 移动或者改变元素时 边框的吸附距离 单位：像素 plugins/dialog/plugin.js    config.dialog_magnetDistance = 20;    // 是否拒绝本地拼写检查和提示 默认为拒绝 目前仅firefox和safari支持 plugins/wysiwygarea/plugin.js.    config.disableNativeSpellChecker = true;    // 进行表格编辑功能 如：添加行或列 目前仅firefox支持 plugins/wysiwygarea/plugin.js    config.disableNativeTableHandles = true; // 默认为不开启    // 是否开启 图片和表格 的改变大小的功能 config.disableObjectResizing = true;    config.disableObjectResizing = false; // 默认为开启    // 设置HTML文档类型    config.docType = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"' ;    // 是否对编辑区域进行渲染 plugins/editingblock/plugin.js    config.editingBlock = true;    // 编辑器中回车产生的标签    config.enterMode = CKEDITOR.ENTER_P; // 可选：CKEDITOR.ENTER_BR或CKEDITOR.ENTER_DIV    // 是否使用HTML实体进行输出 plugins/entities/plugin.js    config.entities = true;    // 定义更多的实体 plugins/entities/plugin.jsconfig.entities_additional = '#39'; // 其中#代替了&    // 是否转换一些难以显示的字符为相应的HTML字符 plugins/entities/plugin.jsconfig.entities_greek = true;    // 是否转换一些拉丁字符为HTML plugins/entities/plugin.jsconfig.entities_latin = true;    // 是否转换一些特殊字符为ASCII字符 如"This is Chinese: 汉语."转换为"This is Chinese:// 汉语." plugins/entities/plugin.jsconfig.entities_processNumerical = false;    // 添加新组件config.extraPlugins = 'myplugin'; // 非默认 仅示例    // 使用搜索时的高亮色 plugins/find/plugin.jsconfig.find_highlight = {element : 'span',styles : { 'background-color' : '#ff0', 'color' : '#00f' }};    // 默认的字体名 plugins/font/plugin.jsconfig.font_defaultLabel = 'Arial';    // 字体编辑时的字符集 可以添加常用的中文字符：宋体、楷体、黑体等 plugins/font/plugin.jsconfig.font_names = 'Arial;Times New Roman;Verdana';    // 文字的默认式样 plugins/font/plugin.jsconfig.font_style = {element   : 'span',styles   : { 'font-family' : '#(family)' },overrides : [ { element : 'font', attributes : { 'face' : null } } ]};    // 字体默认大小 plugins/font/plugin.jsconfig.fontSize_defaultLabel = '12px';    // 字体编辑时可选的字体大小 plugins/font/plugin.jsconfig.fontSize_sizes ='8/8px;9/9px;10/10px;11/11px;12/12px;14/14px;16/16px;18/18px;20/20px;22/22px;24/24px;26/26px;28/28px;36/36px;48/48px;72/72px';    // 设置字体大小时 使用的式样 plugins/font/plugin.jsconfig.fontSize_style = {element   : 'span',styles   : { 'font-size' : '#(size)' },overrides : [ { element : 'font', attributes : { 'size' : null } } ]};    // 是否强制复制来的内容去除格式 plugins/pastetext/plugin.jsconfig.forcePasteAsPlainText =false; // 不去除    // 是否强制用“&”来代替“&”plugins/htmldataprocessor/plugin.jsconfig.forceSimpleAmpersand = false;    // 对address标签进行格式化 plugins/format/plugin.jsconfig.format_address = { element : 'address', attributes : { class : 'styledAddress' } };    // 对DIV标签自动进行格式化 plugins/format/plugin.jsconfig.format_div = { element : 'div', attributes : { class : 'normalDiv' } };    // 对H1标签自动进行格式化 plugins/format/plugin.jsconfig.format_h1 = { element : 'h1', attributes : { class : 'contentTitle1' } };    // 对H2标签自动进行格式化 plugins/format/plugin.jsconfig.format_h2 = { element : 'h2', attributes : { class : 'contentTitle2' } };    // 对H3标签自动进行格式化 plugins/format/plugin.jsconfig.format_h1 = { element : 'h3', attributes : { class : 'contentTitle3' } };    // 对H4标签自动进行格式化 plugins/format/plugin.jsconfig.format_h1 = { element : 'h4', attributes : { class : 'contentTitle4' } };    // 对H5标签自动进行格式化 plugins/format/plugin.jsconfig.format_h1 = { element : 'h5', attributes : { class : 'contentTitle5' } };    // 对H6标签自动进行格式化 plugins/format/plugin.jsconfig.format_h1 = { element : 'h6', attributes : { class : 'contentTitle6' } };    // 对P标签自动进行格式化 plugins/format/plugin.jsconfig.format_p = { element : 'p', attributes : { class : 'normalPara' } };    // 对PRE标签自动进行格式化 plugins/format/plugin.jsconfig.format_pre = { element : 'pre', attributes : { class : 'code' } };    // 用分号分隔的标签名字 在工具栏上显示 plugins/format/plugin.jsconfig.format_tags = 'p;h1;h2;h3;h4;h5;h6;pre;address;div';    // 是否使用完整的html编辑模式 如使用，其源码将包含：<html><body></body></html>等标签config.fullPage = false;    // 是否忽略段落中的空字符 若不忽略 则字符将以“”表示 plugins/wysiwygarea/plugin.jsconfig.ignoreEmptyParagraph = true;    // 在清除图片属性框中的链接属性时 是否同时清除两边的<a>标签 plugins/image/plugin.jsconfig.image_removeLinkByEmptyURL = true;    // 一组用逗号分隔的标签名称，显示在左下角的层次嵌套中 plugins/menu/plugin.js.config.menu_groups ='clipboard,form,tablecell,tablecellproperties,tablerow,tablecolumn,table,anchor,link,image,flash,checkbox,radio,textfield,hiddenfield,imagebutton,button,select,textarea';    // 显示子菜单时的延迟，单位：ms plugins/menu/plugin.jsconfig.menu_subMenuDelay = 400;    // 当执行“新建”命令时，编辑器中的内容 plugins/newpage/plugin.jsconfig.newpage_html = '';    // 当从word里复制文字进来时，是否进行文字的格式化去除 plugins/pastefromword/plugin.jsconfig.pasteFromWordIgnoreFontFace = true; // 默认为忽略格式    // 是否使用<h1><h2>等标签修饰或者代替从word文档中粘贴过来的内容 plugins/pastefromword/plugin.jsconfig.pasteFromWordKeepsStructure = false;    // 从word中粘贴内容时是否移除格式 plugins/pastefromword/plugin.jsconfig.pasteFromWordRemoveStyle = false;    // 对应后台语言的类型来对输出的HTML内容进行格式化，默认为空config.protectedSource.push( /</?[/s/S]*?/?>/g );   // PHP Codeconfig.protectedSource.push( // g ); // ASP Codeconfig.protectedSource.push( /(]+>[/s|/S]*?<// asp:[^/>]+>)|(]+//>)/gi ); //// ASP.Net Code    // 当输入：shift+Enter时插入的标签config.shiftEnterMode = CKEDITOR.ENTER_P; // 可选：CKEDITOR.ENTER_BR或CKEDITOR.ENTER_DIV    // 可选的表情替代字符 plugins/smiley/plugin.js.config.smiley_descriptions = [':)', ':(', ';)', ':D', ':/', ':P','', '', '', '', '', '','', ';(', '', '', '', '','', ':kiss', '' ];    // 对应的表情图片 plugins/smiley/plugin.jsconfig.smiley_images = ['regular_smile.gif','sad_smile.gif','wink_smile.gif','teeth_smile.gif','confused_smile.gif','tounge_smile.gif','embaressed_smile.gif','omg_smile.gif','whatchutalkingabout_smile.gif','angry_smile.gif','angel_smile.gif','shades_smile.gif','devil_smile.gif','cry_smile.gif','lightbulb.gif','thumbs_down.gif','thumbs_up.gif','heart.gif','broken_heart.gif','kiss.gif','envelope.gif'];    // 表情的地址 plugins/smiley/plugin.jsconfig.smiley_path = 'plugins/smiley/images/';    // 页面载入时，编辑框是否立即获得焦点 plugins/editingblock/plugin.js// plugins/editingblock/plugin.js.config.startupFocus = false;    // 载入时，以何种方式编辑 源码和所见即所得 "source"和"wysiwyg" plugins/editingblock/plugin.js.config.startupMode ='wysiwyg';    // 载入时，是否显示框体的边框 plugins/showblocks/plugin.jsconfig.startupOutlineBlocks = false;    // 是否载入样式文件 plugins/stylescombo/plugin.js.config.stylesCombo_stylesSet = 'default';// 以下为可选config.stylesCombo_stylesSet = 'mystyles';config.stylesCombo_stylesSet = 'mystyles:/editorstyles/styles.js';config.stylesCombo_stylesSet = 'mystyles:http://www.example.com/editorstyles/styles.js';    // 起始的索引值config.tabIndex = 0;    // 当用户键入TAB时，编辑器走过的空格数，( ) 当值为0时，焦点将移出编辑框 plugins/tab/plugin.jsconfig.tabSpaces = 0;    // 默认使用的模板 plugins/templates/plugin.js.config.templates = 'default';    // 用逗号分隔的模板文件plugins/templates/plugin.js.config.templates_files = [ 'plugins/templates/templates/default.js' ];    // 当使用模板时，“编辑内容将被替换”框是否选中 plugins/templates/plugin.jsconfig.templates_replaceContent = true;    // 主题config.theme = 'default';    // 撤销的记录步数 plugins/undo/plugin.jsconfig.undoStackSize =20;// 在 CKEditor 中集成 CKFinder，注意 ckfinder 的路径选择要正确。CKFinder.SetupCKEditor(null, '/ckfinder/');

第二步：

在页面<head>中引入ckeditor核心文件ckeditor.js

“<script type="text/javascript" src="ckeditor/ckeditor.js"></script> ”，（注意路径）

引入之后，在<textarea></textarea>下面引入<style>标签

“<scripttype="text/javascript">CKEDITOR.replace('ckedit');</script>”（这里要注意，替换的是textarea的name属性，而不是id属性）。

    这样在项目就可以使用ckeditor了。

3、ckeditor集成ckfinder

第一步、引入jar包和相关文件

-- 将下载的zip包解压后，找到里面的.war包，然后解压.war包。

-- 将.war包下的ckfinder文件夹复制到webContent的目录下。

-- 将.war包下的WEB-INF下的config.xml文件复制到项目的WEB-INF目录下，并进行配置，具体配置在第二步。

-- 将.war包下的WEB-INF下的lib包里的jar包全部复制到项目中并添加引用。

第二步、web.xml和config.xml

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>          /web/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>          /web/ckfinder/core/connector/java/connector.java       </url-pattern>   </filter-mapping>

config.xml配置项

<config><!--CKFinder : Configuration File - Basic InstructionsIn a generic usage case, the following tasks must be done to configure CKFinder:1. Check the baseDir and baseUrl options;2. If available, paste your license key in the "licenseKey" setting;3. Enable CKFinder using the "enabled" setting.WARNING : DO NOT simply set "enabled" to "true" on a production site. By doing so, you are allowing "anyone" to upload and list the files in your server. You must implementsome kind of session validation.http://docs.cksource.com/CKFinder_2.x/Developers_Guide/Java/Configuration/Extending--><!-- 这里要开启，才能使用ckfinder --><enabled>true</enabled><!--Configure the location of uploaded files. See the following article for more details:http://docs.cksource.com/CKFinder_2.x/Developers_Guide/Java/Configuration/baseURL_and_baseDir--><baseDir></baseDir><!-- 这里是ckfinder上传文件的跟路径，这里要格外主要，如果要发布的webapp是ROOT的话，则不用加context的名称，如果不是ROOT则要加上 --><baseURL>/ck/CKFinderJava/userfiles/</baseURL><licenseKey></licenseKey><licenseName></licenseName><!--Set the maximum size of uploaded images. If an uploaded image is larger, itgets scaled down proportionally. Set to 0 to disable this feature.--><imgWidth>1600</imgWidth><imgHeight>1200</imgHeight><imgQuality>80</imgQuality><!--See the following article for more details:http://docs.cksource.com/CKFinder_2.x/Developers_Guide/Java/Configuration/URI_Encoding--><uriEncoding>UTF-8</uriEncoding><!--ResourceType : defines the "resource types" handled in CKFinder. A resourcetype is nothing more than a way to group files under different paths, each onehaving different configuration settings.Each resource type name must be unique.When loading CKFinder, the "type" querystring parameter can be used to displaya specific type only. If "type" is omitted in the URL, the"DefaultResourceTypes" settings is used (may contain the resource type namesseparated by a comma). If left empty, all types are loaded.maxSize is defined in bytes, but shorthand notation may be also used.Available options are: G, M, K (case insensitive).1M equals 1048576 bytes (one Megabyte), 1K equals 1024 bytes (one Kilobyte), 1G equals one Gigabyte.Example: 'maxSize' => "8M",==============================================================================ATTENTION: Flash files with `swf' extension, just like HTML files, can be used to execute JavaScript code and to e.g. perform an XSS attack. Grant permission to upload `.swf` files only if you understand and can accept this risk.==============================================================================--><defaultResourceTypes></defaultResourceTypes><types><type name="Files"><url>%BASE_URL%files/</url><directory>%BASE_DIR%files</directory><maxSize>0</maxSize><allowedExtensions>7z,aiff,asf,avi,bmp,csv,doc,docx,fla,flv,gif,gz,gzip,jpeg,jpg,mid,mov,mp3,mp4,mpc,mpeg,mpg,ods,odt,pdf,png,ppt,pptx,pxd,qt,ram,rar,rm,rmi,rmvb,rtf,sdc,sitd,swf,sxc,sxw,tar,tgz,tif,tiff,txt,vsd,wav,wma,wmv,xls,xlsx,zip</allowedExtensions><deniedExtensions></deniedExtensions></type><type name="Images"><url>%BASE_URL%images/</url><directory>%BASE_DIR%images</directory><maxSize>0</maxSize><allowedExtensions>bmp,gif,jpeg,jpg,png</allowedExtensions><deniedExtensions></deniedExtensions></type><type name="Flash"><url>%BASE_URL%flash/</url><directory>%BASE_DIR%flash</directory><maxSize>0</maxSize><allowedExtensions>swf,flv</allowedExtensions><deniedExtensions></deniedExtensions></type></types><!--The session variable name that CKFinder must use to retrievethe "role" of the current user. The "role", can be used in the "accessControls"settings (bellow).--><userRoleSessionVar>CKFinder_UserRole</userRoleSessionVar><accessControls><accessControl><role>*</role><resourceType>*</resourceType><folder>/</folder><folderView>true</folderView><folderCreate>true</folderCreate><folderRename>true</folderRename><folderDelete>true</folderDelete><fileView>true</fileView><fileUpload>true</fileUpload><fileRename>true</fileRename><fileDelete>true</fileDelete></accessControl></accessControls><thumbs><enabled>true</enabled><url>%BASE_URL%_thumbs/</url><directory>%BASE_DIR%_thumbs</directory><directAccess>false</directAccess><maxHeight>100</maxHeight><maxWidth>100</maxWidth><quality>80</quality></thumbs><!--Increases the security on an IIS web server.If enabled, CKFinder will disallow creating folders and uploading files whose names contain characters that are not safe under an IIS web server.--><disallowUnsafeCharacters>false</disallowUnsafeCharacters><!--Due to security issues with Apache modules, it is recommended to leave thefollowing setting enabled.How does it work? Suppose the following:- If "php" is on the denied extensions list, a file named foo.php cannot be  uploaded.- If "rar" (or any other) extension is allowed, one can upload a file named  foo.rar.- The file foo.php.rar has "rar" extension so, in theory, it can be also  uploaded.In some conditions Apache can treat the foo.php.rar file just like any PHPscript and execute it.If CheckDoubleExtension is enabled, each part of the file name after a dot ischecked, not only the last part. In this way, uploading foo.php.rar would bedenied, because "php" is on the denied extensions list.--><checkDoubleExtension>true</checkDoubleExtension><!--Indicates that the file size (maxSize) for images must be checked onlyafter scaling them. Otherwise, it is checked right after uploading.--><checkSizeAfterScaling>true</checkSizeAfterScaling><!--Perform additional checks for image filesif set to true, validate image size--><secureImageUploads>true</secureImageUploads><!--For security, HTML is allowed in the first Kb of data for files having thefollowing extensions only.--><htmlExtensions>html,htm,xml,js</htmlExtensions><!--Force ASCII names for files and folders. If enabled, characters with diactric marks will be automatically converted to ASCII letters.--><forceASCII>false</forceASCII><!--Folders to not display in CKFinder, no matter their location.No paths are accepted, only the folder name.The * and ? wildcards are accepted.".*" disallows the creation of folders starting with a dot character.--><hideFolders><folder>.*</folder><folder>CVS</folder></hideFolders><!--Files to not display/upload in CKFinder, no matter their location.No paths are accepted, only the file name, including extension.The * and ? wildcards are accepted.--><hideFiles><file>.*</file></hideFiles><plugins><plugin><name>imageresize</name><class>com.ckfinder.connector.plugins.ImageResize</class><params><param name="smallThumb" value="90x90"></param><param name="mediumThumb" value="120x120"></param><param name="largeThumb" value="180x180"></param></params></plugin><plugin><name>fileeditor</name><class>com.ckfinder.connector.plugins.FileEditor</class><params></params></plugin><!-- Before enabling the watermark plugin make sure to specify path to source image --><!-- The "internal" flag informs CKFinder that watermark is a pure server side plugin --><!--<plugin><name>watermark</name><class>com.ckfinder.connector.plugins.Watermark</class><params><param name="source" value="/path/in/servlet/context/logo.gif"></param><param name="transparency" value="0.8"></param><param name="quality" value="100"></param><param name="marginRight" value="5"></param><param name="marginBottom" value="5"></param></params><internal>true</internal></plugin>--></plugins><basePathBuilderImpl>com.ckfinder.connector.configuration.ConfigurationPathBuilder</basePathBuilderImpl></config>

第三步、配置ckeditor的config.js文件

在ckeditor的config.js文件中加入以下配置项：

// 上传文件时浏览服务文件夹                                                                                                     config.filebrowserBrowseUrl ='web/ckfinder/ckfinder.html';                                                         // 上传图片时浏览服务文件夹                                                                                                      config.filebrowserImageBrowseUrl ='web/ckfinder/ckfinder.html?Type=Images';                                        // 上传Flash时浏览服务文件夹                                                                                                   config.filebrowserFlashBrowseUrl ='web/ckfinder/ckfinder.html?Type=Flash';                                         // 上传文件按钮(标签)                                                                                                       config.filebrowserUploadUrl ='web/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files';     // 上传图片按钮(标签)                                                                                                       config.filebrowserImageUploadUrl ='web/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images';// 上传Flash按钮(标签)                                                                                                    config.filebrowserFlashUploadUrl ='web/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash';

第四步、在jsp页面上引入响应的js文件

<script type="text/javascript" src="/web/ckfinder/ckfinder.js"></script>

4、优化介绍

优化一：去除上传文件预览界面的英文。

图：

修改方法：

打开config.js文件，加入下面一句话

// 预览区域显示内容

config.image_previewText='';

优化二：去掉“浏览服务器”按钮

在config.js中，ckeditor集成ckfinder的配置内容中，以下这些就是这个按钮的样式，注释掉即可。

// 上传文件时浏览服务文件夹config.filebrowserBrowseUrl = 'web/ckfinder/ckfinder.html';// 上传图片时浏览服务文件夹config.filebrowserImageBrowseUrl = 'web/ckfinder/ckfinder.html?Type=Images';// 上传Flash时浏览服务文件夹config.filebrowserFlashBrowseUrl = 'web/ckfinder/ckfinder.html?Type=Flash'; 

优化三：去掉版权信息

未完待续。。。