最新ckeditor_ckfinder整合超完整版

合集下载

富文本编辑器(Ckeditor+Ckfinder)实现富文本编辑和图片文件的上传的配置方法

Ckeditor+Ckfinder在实现富文本编辑和图片文件的上传的配置方法一、下载Ckeditor和Ckfinder。

（一）百度搜索Ckeditor和Ckfinder，点击排名第一的网站。

（二）在其官方网站的download和free trial栏目下载免费的文件包。

注意要选择二、解压缩文件并选择加入网站所需的文件夹。

1.复制ckeditor的_Samples文件夹下的bin和ckeditor两个文件2.复制cfinder整个文件夹，并将bin/release文件夹下的dll文件复制到富文本编辑器的bin文件里。

注意这里就有两个dll文件了。

整理的结果如下：最后将文件夹拷贝到网站根目录下：二、配置ckeditor和ckfinder1.添加对两个bin文件夹下dll文件的引用2.在工具箱加入ckeditor控件，选择选择项。

在选择工具箱.netFramework组件中浏览选择bin文件夹中的.dll文件，工具箱将会多出一个CKEditorControl控件。

2.在需要使用富文本编辑器的网页中加入CKEditorControl 控件。

在属性窗口输入都要ckfinder文件浏览和上传功能的管理页面，包括浏览服务器和上传两个功能。

注意目录一定要正确FilebrowserBrowseUrl="../fwh_new_bjq/ckfinder/ckfinder.html?Type=Files" FilebrowserFlashBrowseUrl="../fwh_new_bjq/ckfinder/ckfinder.html?Type=Flash" FilebrowserImageBrowseUrl="../fwh_new_bjq/ckfinder/ckfinder.html?Type=Images"FilebrowserFlashUploadUrl="../fwh_new_bjq/ckfinder/core/connector/aspx/connector.aspx?comman d=QuickUpload&type=Flash"FilebrowserImageUploadUrl="../fwh_new_bjq/ckfinder/core/connector/aspx/connector.aspx?comman d=QuickUpload&type=Images"FilebrowserUploadUrl="../fwh_new_bjq/ckfinder/core/connector/aspx/connector.aspx?command=Qui ckUpload&type=Files"选择/ckfinder/config.ascx文件，修改授权规则和上传目录。

ckeditor配置(详细)

一、使用方法：1、在页面<head>中引入ckeditor核心文件ckeditor.js<script type="text/javascript" src="ckeditor/ckeditor.js"></script>2、在使用编辑器的地方插入HTML控件<textarea><textarea id="TextArea1" cols="20" rows="2" class="ckeditor"></textarea> 如果是环境，也可用服务器端控件<TextBox><asp:TextBox ID="tbContent" runat="server" TextMode="MultiLine"class="ckeditor"></asp:TextBox>注意在控件中加上 class="ckeditor" 。

3、将相应的控件替换成编辑器代码<script type="text/javascript">CKEDITOR.replace('TextArea1');//如果是在环境下用的服务器端控件<TextBox>CKEDITOR.replace('tbContent');//如果<TextBox>控件在母版页中，要这样写CKEDITOR.replace('<%=tbContent.ClientID.Replace("_","$") %>');</script>4、配置编辑器ckeditor的配置都集中在 ckeditor/config.js 文件中，下面是一些常用的配置参数：// 界面语言，默认为 'en'nguage = 'zh-cn';// 设置宽高config.width = 400;config.height = 400;// 编辑器样式，有三种：'kama'（默认）、'office2003'、'v2'config.skin = 'v2';// 背景颜色config.uiColor = '#FFF';// 工具栏（基础'Basic'、全能'Full'、自定义）plugins/toolbar/plugin.jsconfig.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.jsconfig.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 /*F10*/, 'toolbarFocus' ], //获取焦点[ CKEDITOR.ALT + 122 /*F11*/, 'elementsPathFocus' ], //元素焦点 [ CKEDITOR.SHIFT + 121 /*F10*/, 'contextMenu' ], //文本菜单[ CKEDITOR.CTRL + 90 /*Z*/, 'undo' ], //撤销[ CKEDITOR.CTRL + 89 /*Y*/, 'redo' ], //重做[ CKEDITOR.CTRL + CKEDITOR.SHIFT + 90 /*Z*/, 'redo' ], //[ CKEDITOR.CTRL + 76 /*L*/, 'link' ], //链接[ CKEDITOR.CTRL + 66 /*B*/, 'bold' ], //粗体[ CKEDITOR.CTRL + 73 /*I*/, 'italic' ], //斜体[ CKEDITOR.CTRL + 85 /*U*/, 'underline' ], //下划线[ CKEDITOR.ALT + 109 /*-*/, 'toolbarCollapse' ]]//设置快捷键可能与浏览器快捷键冲突 plugins/keystrokes/plugin.js. config.blockedKeystrokes = [CKEDITOR.CTRL + 66 /*B*/,CKEDITOR.CTRL + 73 /*I*/,CKEDITOR.CTRL + 85 /*U*/]//设置编辑内元素的背景色的取值 plugins/colorbutton/plugin.js. config.colorButton_backStyle = {element : 'span',styles : { 'background-color' : '#(color)' }}//设置前景色的取值 plugins/colorbutton/plugin.jsconfig.colorButton_colors ='000,800000,8B4513,2F4F4F,008080,000080,4B0082,696969,B22222,A52A2A,DAA52 0,006400,40E0D0,0000CD,800080,808080,F00,FF8C00,FFD700,008000,0FF,00F,EE82E E,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.jsconfig.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.jsconfig.dialog_backgroundCoverColor = 'rgb(255, 254, 253)'; //可设置参考config.dialog_backgroundCoverColor = 'white' //默认//背景的不透明度数值应该在：0.0～1.0 之间 plugins/dialog/plugin.jsconfig.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.jsconfig.disableNativeTableHandles = true; //默认为不开启//是否开启图片和表格的改变大小的功能 config.disableObjectResizing = true; config.disableObjectResizing = false //默认为开启//设置HTML文档类型config.docType = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd%22' ;//是否对编辑区域进行渲染 plugins/editingblock/plugin.jsconfig.editingBlock = true;//编辑器中回车产生的标签config.enterMode = CKEDITOR.ENTER_P; //可选：CKEDITOR.ENTER_BR或CKEDITOR.ENTER_DIV//是否使用HTML实体进行输出 plugins/entities/plugin.jsconfig.entities = true;//定义更多的实体 plugins/entities/plugin.jsconfig.entities_additional = '#39'; //其中#代替了&//是否转换一些难以显示的字符为相应的HTML字符 plugins/entities/plugin.js config.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/22p x;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.js config.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,i mage,flash,checkbox,radio,textfield,hiddenfield,imagebutton,button,select,textarea';//显示子菜单时的延迟，单位：ms plugins/menu/plugin.jsconfig.menu_subMenuDelay = 400;//当执行“新建”命令时，编辑器中的内容 plugins/newpage/plugin.js config.newpage_html = '';//当从word里复制文字进来时，是否进行文字的格式化去除plugins/pastefromword/plugin.jsconfig.pasteFromWordIgnoreFontFace = true; //默认为忽略格式//是否使用<h1><h2>等标签修饰或者代替从word文档中粘贴过来的内容plugins/pastefromword/plugin.jsconfig.pasteFromWordKeepsStructure = false;//从word中粘贴内容时是否移除格式 plugins/pastefromword/plugin.js config.pasteFromWordRemoveStyle = false;//对应后台语言的类型来对输出的HTML内容进行格式化，默认为空config.protectedSource.push( /<\?[\s\S]*?\?>/g ); // PHP Codeconfig.protectedSource.push( //g ); // ASP Codeconfig.protectedSource.push( /(]+>[\s|\S]*?<\/asp:[^\>]+>)|(]+\/>)/gi ); // 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.g if','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.jsplugins/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:/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.js config.templates_replaceContent = true;//主题config.theme = 'default';//撤销的记录步数 plugins/undo/plugin.jsconfig.undoStackSize =20;// 在 CKEditor 中集成 CKFinder，注意 ckfinder 的路径选择要正确。

在JSP里使用CKEditor和CKFinder

在JSP里使用CKEditor和CKFinder目录1. 下载CKEditor相关的安装文件2. 安装CKEditor和CKFinder3. 在网页里使用CKEditor4. CKEditor的三种配置方式5. CKEditor的一些配置选项6. 关于CKEditor编辑器里面回车的问题7. 将CKFinder整合进CKEditor8. 配置CKFinder9. 在项目里配置CKFinder的servlet10. 更安全的使用CKFinder1. 下载CKEditor相关的安装文件∙CKEditor: 在/download页面左侧，可以下载到各种版本的CKEditor，包括完整版full、标准版standard、基础版basic等。

在页面右侧上方，还有可定制的下载，可以选择Toolbar类型、插件、语言等。

这里我们选择4.1版本的Full版本，下载后得到CKEditor_4.1_full.zip 。

∙CKEditor for java: 在/download页面右侧下部，可以下载到用于服务器端的工具，记得选择for java版本。

这里选择 3.6.4版本。

但是下载下来却是 ckeditor-java-core-3.5.3.jar。

不知道为什么。

∙CKFinder: 在/ckfinder/trial页面，可以下载到各种版本的CKFinder。

仍然选择java版。

这里我们下载的是 2.3.1版本，下载后得到CKFinder_java_2.3.1.zip。

2. 安装CKEditor和CKFinder∙解压CKEditor_4.1_full.zip，把解压得到的目录 ckeditor 完全复制到网站根目录下，也就是和WEB-INF同级。

可以给这个目录加上版本号，即ckeditor4.1。

∙把ckeditor4.1/samples 完全删掉，把ckeditor4.1/lang 里面除了en.js和zh-cn.js之外的文件删掉，把ckeditor4.1 下的README.md, CHANGES.md删掉。

在web工程中整合ckeditor3.6和ckfinder2.0.2

文章分类:Java编程首先在/download 下载当前最新的ckeditor，版本为3.6。

同时下载CKEditor for Java 3.5.3。

在/download 下载当前最新的java版本的ckfinder2.0.2 。

解压后，将ckeditor文件夹放到工程的WebRoot目录下再将ckfinder文件夹也放到工程的WebRoot目录下（及和ckeditor在同一级）要注意：ckfinder解压后，其中包括了war，源码等等。

上面指的ckfinder文件夹不是ckfinder_java_2.0.2目录下的ckfinder，而是ckfinder_java_2.0.2\ckfinder\_sources\CKFinder forJava\WebApp\src\main\webapp\ 目录下的ckfinder文件夹，该文件夹下有ckfinder.js文件。

同时将ckfinder_java_2.0.2\ckfinder\_sources\CKFinder forJava\WebApp\src\main\webapp\WEB-INF 目录下的config.xml文件拷贝到当前工程的WEB-INF 目录下。

（注意要修改config.xml配置文件的 baseURL ）config.xml内容如下：Java代码1./*将baseURL中的fckeditor改为自己工程名2. <maxSize>0</maxSize>表示上传无限制，3.如果不是0的话，其参数结尾必须加k或m或g ，否则上传限制大小就为0，这样就无论你上传什么文件都提示文件过大了。

4.*/5.<config>6. <enabled>true</enabled>7. <baseDir></baseDir>8. <baseURL>/fckeditor/userfiles/</baseURL>9. <licenseKey></licenseKey>10. <licenseName></licenseName>11. <imgWidth>1600</imgWidth>12. <imgHeight>1200</imgHeight>13. <imgQuality>80</imgQuality>14. <uriEncoding>UTF-8</uriEncoding>15. <forceASCII>false</forceASCII>16. <userRoleSessionVar>CKFinder_UserRole</userRoleSessionVar>17. <checkDoubleExtension>true</checkDoubleExtension>18. <checkSizeAfterScaling>true</checkSizeAfterScaling>19. <secureImageUploads>true</secureImageUploads>20. <htmlExtensions>html,htm,xml,js</htmlExtensions>21. <hideFolders>22. <folder>.svn</folder>23. <folder>CVS</folder>24. </hideFolders>25. <hideFiles>26. <file>.*</file>27. </hideFiles>28. <defaultResourceTypes></defaultResourceTypes>29. <types>30. <type name="Files">31. <url>%BASE_URL%files/</url>32. <directory>%BASE_DIR%files</directory>33. <maxSize>0</maxSize>34. <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,sw f,sxc,sxw,tar,tgz,tif,tiff,txt,vsd,wav,wma,wmv,xls,xlsx,zip35. </allowedExtensions>36. <deniedExtensions></deniedExtensions>37. </type>38. <type name="Images">39. <url>%BASE_URL%images/</url>40. <directory>%BASE_DIR%images</directory>41. <maxSize>0</maxSize> <allowedExtensions>bmp,gif,jpeg,jpg,png</allowedExtensions>42. <deniedExtensions></deniedExtensions>43.44. </type>45. <type name="Flash">46. <url>%BASE_URL%flash/</url>47. <directory>%BASE_DIR%flash</directory>48. <maxSize>0</maxSize>49. <allowedExtensions>swf,flv</allowedExtensions>50. <deniedExtensions></deniedExtensions>51. </type>52. </types>53. <accessControls>54. <accessControl>55. <role>*</role>56. <resourceType>*</resourceType>57. <folder>/</folder>58. <folderView>true</folderView>59. <folderCreate>true</folderCreate>60. <folderRename>true</folderRename>61. <folderDelete>true</folderDelete>62. <fileView>true</fileView>63. <fileUpload>true</fileUpload>64. <fileRename>true</fileRename>65. <fileDelete>true</fileDelete>66. </accessControl>67. </accessControls>68. <thumbs>69. <enabled>true</enabled>70. <url>%BASE_URL%_thumbs/</url>71. <directory>%BASE_DIR%_thumbs</directory>72. <directAccess>false</directAccess>73. <maxHeight>100</maxHeight>74. <maxWidth>100</maxWidth>75. <quality>80</quality>76. </thumbs>77. <plugins>78. <plugin>79. <name>imageresize</name>80. <class>com.ckfinder.connector.plugins.ImageResize</class>81. <params>82. <param name="smallThumb" value="90x90"></param>83. <param name="mediumThumb" value="120x120"></param>84. <param name="largeThumb" value="180x180"></param>85. </params>86. </plugin>87. <plugin>88. <name>fileeditor</name>89. <class>com.ckfinder.connector.plugins.FileEditor</class>90. <params></params>91. </plugin>92. </plugins>93. <basePathBuilderImpl>com.ckfinder.connector.configuration.ConfigurationPathBuilder</basePathBuilderImpl>94.</config>在web.xml文件中添加如下：Java代码1.<servlet>2. <servlet-name>ConnectorServlet</servlet-name>3. <servlet-class>4. com.ckfinder.connector.ConnectorServlet5. </servlet-class>6. <init-param>7. <param-name>XMLConfig</param-name>8. <param-value>/WEB-INF/config.xml</param-value>9. </init-param>10. <init-param>11. <param-name>debug</param-name>12. <param-value>false</param-value>13. </init-param>14. <load-on-startup>1</load-on-startup>15.</servlet>16.<servlet-mapping>17. <servlet-name>ConnectorServlet</servlet-name>18. <url-pattern>19. /ckfinder/core/connector/java/connector.java20. </url-pattern>21.</servlet-mapping>22.<session-config>23. <session-timeout>10</session-timeout>24.</session-config>然后要添加需要的jar包：（这些jar包在以上下载的文件都包含了）ckeditor需要的有：ckeditor-java-core-3.5.3.jarckfinder有：CKFinder-2.0.2.jarCKFinderPlugin-FileEditor-2.0.2.jarCKFinderPlugin-ImageResize-2.0.2.jarThumbnailator-0.3.3.jarcommons-fileupload-1.2.2.jarcommons-io-2.0.1.jar（添加jar包就是将jar拷贝到工程的WEB-INF目录下的lib目录）新建一个jsp文件，如editor.jspJava代码1.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">2.<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>3.<%@ taglib uri="" prefix="ckeditor"%>4.<%@ taglib uri="" prefix="ckfinder"%>5.<%@page import="com.ckeditor.CKEditorConfig"%>6.<%7. String path = request.getContextPath();8. String basePath = request.getScheme() + "://"9. + request.getServerName() + ":" + request.getServerPort()10. + path + "/";11.%>12.<html>13. <head>14. <base href="<%=basePath%>"/>15. <title>在线编辑器</title>16. <meta http-equiv="pragma" content="no-cache" />17. <meta http-equiv="cache-control" content="no-cache"/>18. <meta http-equiv="expires" content="0"/>19. <meta http-equiv="keywords" content="editor,keyword2,keyword3"/>20. <meta http-equiv="description" content="editor"/>21. 24.25. </head>26.27. <body>28. <ckfinder:setupCKEditor editor="editor1" basePath="ckfinder/" />29. <ckeditor:editor basePath="ckeditor/"30. editor="editor1" value=" " />31. </body>32.</html>好了，访问试试看吧，还具有了上传、下载文件功能。

修改ckeditorckfinder上传文件文件夹路径以日期格式命名

修改ckeditorckfinder上传⽂件⽂件夹路径以⽇期格式命名修改/ckfinder/config.ascx⽂件:string dateDir = DateTime.Today.ToString("yyyyMM/");ResourceType type;type = ResourceType.Add( "Files" );type.Url = BaseUrl + "files/" + dateDir;type.Dir = BaseDir == "" ? "" : BaseDir + "files/" + dateDir;type.MaxSize = 0;type.AllowedExtensions = new string[] { "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" };type.DeniedExtensions = new string[] { };type = ResourceType.Add( "Images" );type.Url = BaseUrl + "images/" + dateDir;type.Dir = BaseDir == "" ? "" : BaseDir + "images/" + dateDir;type.MaxSize = 0;type.AllowedExtensions = new string[] { "bmp", "gif", "jpeg", "jpg", "png" };type.DeniedExtensions = new string[] { };type = ResourceType.Add( "Flash" );type.Url = BaseUrl + "flash/" + dateDir;type.Dir = BaseDir == "" ? "" : BaseDir + "flash/" + dateDir;type.MaxSize = 0;type.AllowedExtensions = new string[] { "swf", "flv" };type.DeniedExtensions = new string[] { };。

java与ckeditor和ckfinder整合后实现上传图片功能

<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
</type>
</types>

<accessControls>
<accessControl>
<role>*</role>
<resourceType>*</resourceType>
<folder>/</folder>
<params>
<param name="smallThumb" value="90x90"></param>
<param name="mediumThumb" value="120x120"></param>
<param name="largeThumb" value="180x180"></param>

ckeditor协同kcfinder实现图片的远程管理和图文并茂的内容发布

Ckeditor kcfinder 整合配置：Ckeditor ---- 强大的富文本编辑器官方推出了ckfinder 在线文件管理模块配合，但是该模块并不是和ckeditor一样开源免费使用；不过还好有另外一款文件管理器可与其配合使用，实现你想要的功能，即：kcfinder。

这是其他组织开发的远程文件管理模块，可以用它来协同ckeditor 做文件上传、实现图文并茂的文章发布和远程管理文件资源的操作。

网上下载ckeditor 和kcfinder 的php版本，将两者放到你规划好的同一目录下，配置ckeditor :修改config.js，添加如下配置项：_++++++++++++++++++++++++++++++++++++++++++++++++++++++++ //kcfinder 文件在线浏览的urlconfig.filebrowserBrowseUrl = '/admin/kcfinder/browse.php?type=files';//kcfinder 在线浏览图片资源的urlconfig.filebrowserImageBrowseUrl = '/admin/kcfinder/browse.php?type=images';//kcfinder 在线浏览flash文件的urlconfig.filebrowserFlashBrowseUrl = '/admin/kcfinder/browse.php?type=flash';//ckeittor 文件上传提交的urlconfig.filebrowserUploadUrl = '/admin/kcfinder/upload.php?type=files';//ckeittor 上传图片的urlconfig.filebrowserImageUploadUrl = '/admin/kcfinder/upload.php?type=images';//ckeittor 上传flash的urlconfig.filebrowserFlashUploadUrl = '/admin/kcfinder/upload.php?type=flash';cfinder/config.php里，把uploadURL配置成你自己的上传总目录的URL，比如：/uploads.把uploadDir配置成你自己的上传相对目录（相对于kcfinder/config.php的目录），比如：../../../../uploads/.++++++++++++++++++++++++++++++++++++++++++++++++++++++++++经过以上配置，可以在ckeditor 的工具栏里边的图像工具和flash工具里边看到多了客户端本地文件上传到服务器的菜单项，但是此时上传会出问题，还需配置kcfinder 正确响应ckeditor的操作请求，以及配置正确的上传文件保存路径：修改kcfinder 的配置文件config.php 里边有两个地方需要更改：一是添加权限限制，不能谁谁都可以向你服务器上传东西：比如我的一个小应用-----文章发布系统的后台，我在config.php文件的最顶部加入：+++++++++++++++++++++++++++++++++++++++++++++++++++++++session_start();if(!empty($_SESSION['USERNAME'])&&!empty($_SESSION['PASSWORD'])){ $_SESSION['KCFINDER']['disabled'] = false;}else{echo "<script>top.location.href='../login.php';</script>";}++++++++++++++++++++++++++++++++++++++++++++++++++++++++以上代码主要是判断用户是否登录，登录的话让kcfinder 的$_SESSION['KCFINDER']['disabled'] = false;//就是启用kcfinder反之就跳转到登录页面登录；配置如下：（配置数组方式）//不允许上的传文件类型限制'deniedExts' => "exe com msi bat php phps phtml php3 php4 cgi pl",'maxImageWidth' => 0, //图片最大宽度'maxImageHeight' => 0,//图片最大高度'thumbWidth' => 100,//缩略图的最大宽'thumbHeight' => 100, //缩略图的最大高'jpegQuality' => 90, //图片质量//上传文件保存路径配置：'uploadURL' => "../upload/",以上是一些基本配置，之后kcfinder 就可以一ckeditor模块的方式协同ckeditor 来做文件上传、实现图文并茂的文章发布和远程管理文件资源的操作。

ckeditor与ckfinder整合forJAVA(解决乱码问题)

ckeditor + ckfinder整合for JA V A---支持文件上传、解决乱码问题2012-07-18备注：本人使用的开发工具为eclipse 3.7.0，服务器为：apache-tomcat-7.0.20，jdk版本为：jdk1.6.0_29。

本人已使用了字符过滤器，所有的字符都设置为UTF-8。

仅供参考。

一．简谈：前期（2012-06-20）本人根据网上一些资料，以及个人的实现，发布了“ckeditor + ckfinder整合for JA V A（支持文件上传）”文档，收到了很多网友的私信，并进行了交流。

在此感谢那些交流过的网友。

网上大多数的资料都是相对比较老的版本，所以本人花了一些时间写下了ckeditor 和ckfinder整合。

但由于本人只是简单的应用，所以没有整合的很充分，部分功能没有全部去实现，如文件夹重命名、文件夹新建、上传文件时文件带有汉字等乱码问题没有解决，先作补充如下（请先阅读前期材料）。

二．“错误”的出现当前期准备完成后，我们开始操作图片、文档、flash的上传了，但是这时你会发现，当上传文件名为汉字，后者新建文件夹，或者重命名文件夹的时候，如果使用中文会出现乱码，导致文件、文件夹无法访问。

操作如下：打开上传页面，选择Files--创建子文件夹，如下图所示：输入“我们”，如下图所示：选择“确定”，出现如下情况：同理，当文件夹重命名带汉字，上传图片时文件名带汉字也会出现类似的情况。

三．问题的解决先解决方法如下：找到程序运行的服务器（tomcat），下的server.xml文件用记事本打开找到如下段落，如下图所示：修改为如下图所示区域：<Connector port="8080" protocol="HTTP/1.1"connectionTimeout="20000"redirectPort="8443"URIEncoding="UTF-8" />注意大小写问题。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

Ckeditor ckfinder2.0.1超强整合完整版实践版 PHP目录php开发--使用CKEditor 和CKFinder 实现上传功能 (1)1. 下载安装CKEditor: (1)2. 下载安装CKFinder: (2)3. 在网页中使用CKEditor 和CKFinder: (2)4. 配置CKFinder进行上传图片，Flash等。

(3)5．Ckfinder实现普通文件上传 (5)ckfinder中实现文件上传后按当前时间改名 (6)CKEditor 优化配置 (6)精简Ckeditor (6)提速：禁用拼写检查 (6)CKFinder 单独使用 (9)ckfinder去掉注册的提示信息 (10)php开发--使用CKEditor 和CKFinder 实现上传功能1. 下载安装CKEditor:/解压下载到的CKEditor放到网站的路径中即可简单配置ckeditor，打开config.js，添加如下内容2. 下载安装CKFinder:/download解压下载到的CKEditor放到与CKEditor同一目录中即可3. 在网页中使用CKEditor 和CKFinder:CKEditor 实际是替换一个textarea 标签，所以把textarea放到一个form中，当提交到php 服务器端，使用$_GET['xxx'] 或者$_POST['xxx'] 取得编辑好的数据。

注意，因为CKEditor 要替换textarea，所以相应的javascript 代码"CKEDITOR.replace(xxxxxx)" 要放在textarea 的后面。

最简单的方法，直接使用下面的例子修改一下即可。

可以在网页中看到CKEditor 了，兴奋吧。

注意：路径一定要正确，否者无法显示。

4. 配置CKFinder进行上传图片，Flash等。

到这里，点击 "Image" 按钮，在弹出的窗口中的 "Upload" 标签中已经看到上传按钮了，但是在上传文件时失败。

因为CKFinder还没有配置好。

需要创建上传文件的目录和修改 ckfinder/config.php 里的三个地方:a. 创建保存上传文件的目录，如uploads，其路径为/Users/Biao/Sites/php/uploads/[For Linux: 把其权限设置为php server可读写，最简单的是 chmod 777 uploads 这样php server才有权限往里面保存文件.]b.找到配置文件第32行，把 function CheckAuthentication() { return false; }修改成 function CheckAuthentication() { return true; }c. 找到第63行，把 $baseUrl 的值改成保存上传文件存目录的URL，如 $baseUrl = '/~Biao/php/uploads/';怎么取得这个 URL 呢？其实很简单，在这个uploads文件夹里创建一个简单的path.php 文件：<?php echo $_SERVER["PHP_SELF"] ?>，然后从浏览器里访问，就可以得到 /~Biao/php/uploads/path.php，则 uploads 文件夹的URL是 /~Biao/php/uploads/d. 找到第82行，删除 $baseDir = resolveUrl($baseUrl); 修改 $baseDir 为上传文件目录的绝对路径，如$baseDir ='/Users/Biao/Sites/php/uploads/';这是因为resolveUrl($baseUrl)函数不能正常工作。

可以这样也可以不修改，新版本的已经可以正常工作了。

至此，可以使用 CKEditor 和 CKFinder 上传文件了。

对上面这个小例子中服务器端的b.php代码：可以看到，在点击submit按钮后，服务器端收到了CKEditor中的内容，并使用echo输出，生成一个与CKEditor里面编辑的完全一样的内容。

在服务器端可以把收到的内容保存到数据库中。

然后再读出在相应的页面显示出来。

ckeditor界面Ckfinder界面5．Ckfinder实现普通文件上传其实上面的代码已经能够实现上传了只是找不到位置，应该这样操作即可成功。

点“插入/编辑超链接”，再点“上传”选项卡，选文件后点“上传到服务器上”就可以实现了，呵呵。

是不非常简单呀。

ckfinder中实现文件上传后按当前时间改名还有一个问题就是用ckfinder上传的文件不会重命名，对于中文文件就不能识别了。

所有还要对上传的文件重命名，将文件名改为当前时间戳。

上传的有中文文件名的文件时会出现乱码并且编辑器无法显示上传文件。

CKfinder直接将文件以原文件名保存到服务器的，不知道官方有没提供更改保存文件名的配置方法（我没找到），所以直接更改PHP文件。

打开：ckfinder\core\connector\php\php5\CommandHandler\FileUpload.phpCKEditor 优化配置精简Ckeditor在部署到Web服务器上时，下列文件夹和文件都可以删除：/_samples ：示例文件夹；/_source ：未压缩源程序；/lang文件夹下除zh-cn.js、en.js 以外的文件（也可以根据需要保留其他语言文件）；根目录下的changes.html(更新列表)，install.html(安装指向)，license.html(使用许可)；/skins 目录下不需要的皮肤，一般用V2(简单，朴素) ，如果只保留V2则必须在config.js 中指定皮肤。

提速：禁用拼写检查ckeditor 的自动拼写检查功能(通过与网站交互完成)，使得ckeditor 的装载非常的慢，有时显得录入反应相当的慢。

拼写检查对于中文是多余了，所以可以把此功能屏蔽掉。

官方网站的说法是Scayt' (spell checker as yout type)修改ckeditor_3.3.1\config.js ( 以此版本为例)Js代码CKEDITOR.editorConfig = function( config ){......config.disableNativeSpellChecker = false ;config.scayt_autoStartup = false;......};下面是官网对这两个参数的说明( )：参数disableNativeSpellChecker 的说明：Disables the built-in spell checker while typing natively available in the browser (currently Firefox and Safari only). Even if word suggestions will not appear in the CKEditor context menu, this feature is useful to help quickly identifying misspelled words.This setting is currently compatible with Firefox only due to limitations in other browsers.参数scayt_autoStartup 的说明：If enabled (true), turns on SCAYT automatically after loading the editor.CKEditor 增加字体：修改ckeditor\config.jsJava代码CKEDITOR.editorConfig = function( config ){config.font_names = '宋体/宋体;黑体/黑体;仿宋/仿宋_GB2312;楷体/楷体_GB2312;隶书/隶书;幼圆/幼圆;'+ config.font_names ;};其中，楷体/楷体_GB2312，表示在ckeditor中的字体显示名称为“楷体”，系统字体名称为“楷体_GB2312”。

CKEditor 添加自定义字体：修改ckeditor\config.jsConfig.js代码config.contentsCss = 'fonts.css';// 添加新的字体到CKEditor 的字体列表config.font_names = 'fontnametodisplay/yourfontname;' + config.font_names;在fonts.css 中添加@font-face 属性:Fonts.css代码@font-face {font-family: "yourfontname";src: url( ../fonts/font.eot ); /* IE */src: local("realfontname"), url("../fonts/font.TTF") format("truetype"); /*non-IE*/}ckfinder改进：多用户，自动按年月划分文件夹默认的ckfinder只是单用户，或者说，多个用户共用同一个图片目录。

所有上传的image 全部拥挤在一个文件夹。

现在想实现：1. 不同用户有自己的独立的文件夹。

2. 同一个用户的文件能自动根据上传时间归类。

（我这里ckfinder是与ckeditor结合使用的。

如果是ckfinder单独使用或者是与其它editor结合的情况，可能会作不同的修改。

）找到 /ckfinder/config.php 中的 $baseUrl。

这个变量是ckfinder管理的最顶级目录。

假设$baseUrl = '/userfiles/'，那么默认的目录结构是：/userfiles/flashes/images/如果想改成这个结构：/userfiles/user1flashes/images/user2flashes/images/只要为每个用户设定好各自的顶级目录就可以了：$baseUrl = '/userfiles/' . $user;注意，如果 $user 的值是从$_SESSION中取得，需要在/ckfinder/config.php首行加上session_start();到目前为止，第一个需求实现了。