最新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" />注意大小写问题。

CKeditor+CKFinder使用说明

效果图：
使用方法：
1.首先通过浏览的方式导入CKeditor.dll,导入完成之后再工具栏中会出现
这样一个工具
2.新建一个测试页面ToUseCkeditor.aspx，将该工具拉入页面中如下图所示
3.将ckeditor和ckfinder两个文件夹拷贝到项目的根目录下面，如下图所示
4.在引用中要添加CKFinder.dll的引用
5.Ckeditor文件夹下面的config.js文件用来配置编辑器的一些属性，详细如下，不进行配
置就表示使用CKeditor默认的属性
6.CKFinder文件夹下的config.ascx文件可以用来配置文件上传的路径等信息，如果不进行
自定义的配置则使用默认的路径（/ckfinder/userfiles/），如下图所示
7.配置完成，可以正确使用。

ckeditor3.5.2+ckfinder2.1整合项目与详细文档的配置

ckeditor3.5.2+ckfinder2.1jsp总结Ckeditor版本：ckeditor3.5.2Ckfinder版本：ckinder2.1Ckeditor-java-core：Ckeditor-java-core 3.5.3 zip步骤1：建web工程新建web工程：ckeditorDemo步骤2——下载ckeditor集成下载ckeditor3.5.2 zip下载地址：/download集成到项目中：将ckeditor 复制到工程中webRoot 根目录下步骤3——下载ckinder集成下载ckinder2.1 zip下载地址：/download集成到项目中：将ckinder 复制到工程中webRoot 根目录下配置完成图片为：步骤4——界面；分别倒入：ckeditor.js，ckfinder/ckfinder.js<script type="text/javascript"src="<%=basePath%>ckeditor/ckeditor.js"></script><script type="text/javascript"src="<%=basePath%>ckfinder/ckfinder.js"></script><form action="login"method="post"><textarea name="name"></textarea><script type="text/javascript">var name1=CKEDITOR.replace( 'name' );CKFinder.setupCKEditor(name1,'<%=basePath%>ckfinder' );</script><input type="text"name="content"><input type="submit"value="确定"></form>步骤5——导入相关的jar：步骤6——配置web.xml 文件<filter><filter-name>struts2</filter-name><filter-class>com.fckeditor.tool.StrutsFilter</filter-cla ss></filter><filter-mapping><filter-name>struts2</filter-name><url-pattern>/*</url-pattern></filter-mapping><welcome-file-list><welcome-file>index.jsp</welcome-file></welcome-file-list><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><session-config><session-timeout>10</session-timeout></session-config>步骤7——在WEB-INF新建一个config.xml 文件配置为：<config><enabled>true</enabled><baseDir></baseDir><baseURL></baseURL><licenseKey></licenseKey><licenseName></licenseName><imgWidth>1600</imgWidth><imgHeight>1200</imgHeight><imgQuality>80</imgQuality><uriEncoding>UTF-8</uriEncoding><forceASCII>false</forceASCII><userRoleSessionVar>CKFinder_UserRole</userRoleSession Var><checkDoubleExtension>true</checkDoubleExtension><checkSizeAfterScaling>true</checkSizeAfterScaling><secureImageUploads>true</secureImageUploads><htmlExtensions>html,htm,xml,js</htmlExtensions><hideFolders><folder>.svn</folder><folder>CVS</folder></hideFolders><hideFiles><file>.*</file></hideFiles><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,fl a,flv,gif,gz,gzip,jpeg,jpg,mid,mov,mp3,mp4,mpc,mpeg,mpg,o ds,odt,pdf,png,ppt,pptx,pxd,qt,ram,rar,rm,rmi,rmvb,rtf,sd c,sitd,swf,sxc,sxw,tar,tgz,tif,tiff,txt,vsd,wav,wma,wmv,x ls,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</allowedExtens ions><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><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><plugins><plugin><name>imageresize</name><class>com.ckfinder.connector.plugins.ImageResize</cla ss><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</clas s><params></params></plugin></plugins><basePathBuilderImpl>com.ckfinder.connector.configurat ion.ConfigurationPathBuilder</basePathBuilderImpl></config>步骤九：在ckeditor config.js 中添加：CKEDITOR.editorCongig=function(config){//填写以下内容，图片，flash路径config.uiColor = '#F7F8F9'config.scayt_autoStartup = falsenguage = 'zh-cn'; //中文config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html'; config.filebrowserImageBrowseUrl ='ckfinder/ckfinder.html?Type=Images';config.filebrowserFlashBrowseUrl ='ckfinder/ckfinder.html?Type=Flash';config.filebrowserUploadUrl ='ckfinder/core/connector/java/connector.java?command=Quic kUpload&type=Files';config.filebrowserImageUploadUrl ='ckfinder/core/connector/java/connector.java?command=Quic kUpload&type=Images';config.filebrowserFlashUploadUrl ='ckfinder/core/connector/java/connector.java?command=Quic kUpload&type=Flash';};步骤九：ckeditor 与 struts2 兼容的问题：自己写个类继承StrutsPrepareAndExecuteFilter 重写 doFilter 方法public class StrutsFilter extends StrutsPrepareAndExecuteFilter{public void doFilter(ServletRequest req,ServletResponse res, FilterChain chain) throws IOException, ServletException {HttpServletRequest request = (HttpServletRequest) req;String URI = request.getRequestURI();String[] uriArray =URI.split("/ckfinder/core/connector/java/*/");int arrayLen = uriArray.length;if (arrayLen >= 2) {chain.doFilter(req, res);}else {super.doFilter(req, res, chain);}}}在web.xml 配置上面配置好了；<filter><filter-name>struts2</filter-name><filter-class>com.fckeditor.tool.StrutsFilter</filter-cla ss></filter><filter-mapping><filter-name>struts2</filter-name><url-pattern>/*</url-pattern></filter-mapping><welcome-file-list><welcome-file>index.jsp</welcome-file></welcome-file-list><servlet><servlet-name>ConnectorServlet</servlet-name>最后的目录：中文乱码：修改 tomcat6.0 中 conf 中的 server.xml 配置<Connector executor="tomcatThreadPool"port="8080" protocol="HTTP/1.1" connectionTimeout="20000"redirectPort="8443" />。

CKEditor3.6.2+CKFinder的用法

CKEditor3.6.2+CKFinder2.1控件的用法前期准备：下载CKEditor3.6.2和CKFinder2.1一、把CKEditor3.6.2中的ckeditor文件夹（这个文件夹一般在ckeditor_aspnet_3.6.2\_Samples目录下，只要你能找到ckeditor这个文件夹就好办）复制到你的web项目的根目录中，然后引用.dll文件（在_Samples\bin目录下，最好把他复制到项目中的ckeditor文件夹中在引用）二、把CKFinder2.1中的的ckfinder文件夹复制到你的web项目的根目录中，然后引用CKFinder.dll（在ckfinder\bin\Release目录下）在VS工具箱中添加选项卡，并右击选择“选择项”浏览把.dll和CKFinder.dll（这个基本不用），然拖拽CKEditorControl到页面！三、这时我们把ckeditor中的ckeditor.js和ckfinder中的ckfinder.js拖拽到页面上如：<script src="ckeditor/ckeditor.js"type="text/javascript"></script><script src="ckfinder/ckfinder.js"type="text/javascript"></script>四、为了CKEditor这个文本编辑器好看着，在CKEditor中的config.js添加如下代码：nguage = 'zh-cn'; //设置中文语言config.uiColor = '#AADC6E'; //编辑器颜色config.font_names = '宋体;楷体_GB2312;新宋体;黑体;隶书;幼圆;微软雅黑;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana';config.toolbar_Full = [['Source', '-', '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', 'CreateDiv'], ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],['Link', 'Unlink', 'Anchor'], ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'], '/', ['Styles', 'Format', 'Font', 'FontSize'],['TextColor', 'BGColor'], ['Maximize', 'ShowBlocks', '-', 'About']];config.toolbar_Basic = [['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink', '-', 'About']];config.width = 700;config.height = 300;config.filebrowserBrowseUrl = '/ckfinder/ckfinder.html'; //上传文件时浏览服务文件夹config.filebrowserImageBrowseUrl = '/ckfinder/ckfinder.html?Type=Images'; //上传图片时浏览服务文件夹config.filebrowserFlashBrowseUrl = '/ckfinder/ckfinder.html?Type=Flash'; //上传Flash时浏览服务文件夹config.filebrowserUploadUrl ='/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files';//上传文件按钮(标签)config.filebrowserImageUploadUrl ='/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images';//上传图片按钮(标签)config.filebrowserFlashUploadUrl ='/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash';//上传Flash按钮(标签)}五、在网上有很多人都说在CKFinder中的config.ascx添加如下代码：public override bool CheckAuthentication(){return Request.IsAuthenticated;//returntrue;}不过你不设置这一步的话，那你必须return true哦！因为这是控制安全的代码，你设置为false 的话就不能访问了！六、F5运行看看！是不是报错？其实这个错完全对我们没有什么影响！因为我们要把它给删除了，在网上叫帮CKFinder瘦身：把ckfinder文件夹中的_samples文件夹和_source文件夹删除！七、这时候你运行就没有错了，如果不行的话加我QQ：384473244。

CKEditor+CKFinder安装与配置

CKEditor + CKFinder安装与配置CKEditor 和 CKFinder是内容管理系统Drupal中比较重要的两个模块，其中CKEditor是一个文本编辑器，我们利用CKEditor 和CKFinder可以实现图片、flash等文件的上传。

下面我就详细的说说我的配置过程。

一、CKEditor的安装与配置1、到drupal官网上搜索模块ckeditor2、在官网上下载ckeditor模块的接口，下载下来为ckeditor-7.x-1.1.zip3、到/下载最新版本的ckeditor,下载为ckeditor_3.5.3.tar.gz4、解压缩接口文件夹，把文件名为ckeditor放在sites/all/modules中，在将最新版的ckeditor全部内容复制到ckeditor中5、在模块中开启ckeditor模块即可6、在用户管理下配置权限选择allow users to use ckeditor二、Ckfinder的安装与配置1、到/下载最新版本的ckfinder2、解压文件放在sites/all/modules/ckeditor/里面3、在用户管理下配置权限选择allow users to use ckfinder4、打开CKFinder 配置文件 (sites/all/modules/ckeditor/ckfinder/config.php)I) 删除 CheckAuthentication() 函数(不要担心，这个函数在filemanager.config.php还有一个)II) 在$baseDir = resolveUrl($baseUrl);下面添加一行require_once '../../../../includes/filemanager.config.php';5、在配置中配置ckeditor，在用户资料的full点击编辑File browser settings中选中ckfinder6、修改settings.php(路径为 sites/default/settings.php)，去掉变量$cookie_domain 前面的‘#’或‘//’,即是启用变量$cookie_domain。

CKEditor

∙安装∙安装CKEditor是一件容易的工作，只需要按照下面的简单步骤就可以完成。

1.从我们的网站上下载CKEditor的最新版本。

2.将下载的文件解压到你网站目录下的“ckeditor”文件夹里。

注意：你也可以将这些文件放在你网站的任何一个地方，默认为“ckeditor”。

∙测试你的安装∙编辑器附带有一些用来验证安装结果是否能正常运行的简单的例子网页，请查看“_samples”目录。

访问如下的地址进行测试：∙http://<你的网站域名>/<CKEditor 安装路径>/_samples/index.html例如：/ckeditor/_samples/index.html∙集成∙有苦干个方式能将CKEditor集成到你的网页中，在这里介绍最常用的实现方法。

∙第一步：载入CKEditor∙CKEditor 是一个JavaScript 应用程序，你只需要在你的网页中包含一个文件引用就能加载它。

如果你已经将CKEditor安装在了你网站的“ckeditor”目录，你可参照如下示例：∙<head>...<script type="text/javascript" src="/ckeditor/ckeditor.js"></script></head>∙用以上方式加载，CKEditor JavaScript API 就准备就绪，可以使用了。

∙第二步：创建一个编辑器实例∙CKEditor就像一个在你网页中的文本区域（textarea）一样工作，它提供了一个简单易写的用户界面、版式和丰富的文字输入区域，但用文本区域要实现同样的效果，并不容易，它需要用户输入html代码。

但是，实际上，CKEditor仍然是使用一个文本区域来传递它的数据到服务器上，这个文本区域对使用者来说是不可见的，所以，你必需创建并编辑一个实例,首先创建一个实例：∙<textarea name="editor1"><p>Initial value.</p></textarea>∙注意，如果你想要加载一些数据到编辑器中，例如从数据库中读出数据，只需要把数据放在文本区域（textarea）内就可以了，就像上面的例子一样。

ckeditor自定义按钮整合swfupload批量上传图片

ckeditor添加自定义按钮整合swfupload实现批量上传图片给ckeditor添加自定义按钮，由于ckeditor只能上传一张图片，如果要上传多张图片就要结合ckfinder，而ckfinder是收费的，所以就想通过自定义按钮整合swfupload实现一次上传多张图片的功能1、首先下载并安装ckeditor。

2、下载swfupload解压拷贝到对应的文件目录下3、自定义工具栏按钮:我们可以自定义ckeditor工具栏要显示的按钮，工具栏按钮定义可以参考这里。

现在我们需要向工具栏添加一个自定义功能的按钮。

ckeditor工具栏中的每个按钮都是作为插件定义在ckeditor\plugins\目录中。

我们在ckeditor\plugins\中创建一个新文件夹imagedef。

在imagedef文件夹内，我们创建一个plugin.js文件，它的代码如下：CKEDITOR.plugins.add("imagedef",{requires:["dialog"], //当按钮触发时弹出对话框init:function (a){a.addCommand("imagedef", new CKEDITOR.dialogCommand("imagedef"));a.ui.addButton("Imagedef",{label:"图片",command:"imagedef",icon:this.path + "imagedef.gif"});CKEDITOR.dialog.add("imagedef", this.path + "dialogs/imagedef.js");}});在上面的代码中我们指定自定义按钮的图标imagedef.gif，imagedef.gif放在imagedef文件夹中。

ckeditor3.6.5+ck...

ckeditor3.6.5+ck...一、相信很多人都用过大名鼎鼎的FckEditor，最新又出来了个ckEditor，令人一下子搞不清楚，到官方网站看看才知道FckEditor 在2.6版本之后就改名为ckEditor了，在这里特别说明一下，以免混淆，因为网上搜出来的大多都是FckEditor相关配置的文章。

二、FckEditor里有java版本的配置，相信有些同行用过，支持php、、java版本，现在一下子变为ckEditor了。

配置简单的编辑器很简单，这里不多说了，我想大多数人都希望能用到编辑器里的浏览/插入图片功能吧，毕竟一条新闻没个图片说不过去。

当然我们自己做个上传功能，然后复制URL地址插入到URL里也是可以的。

但是这样客户操作难度太高了。

三、这里介绍一下解决办法，看到有个哥们的文章说ckEditor理把自带的上传功能去掉了，需要修改config.js文件里的几个属性config.filebrowserBrowseUrl = '/js/ckfinder/ckfinder.htm';config.filebrowserImageBrowseUrl = '/js/ckfinder/ckfinder.htm?type=Images';config.filebrowserFlashBrowseUrl = '/js/ckfinder/ckfinder.htm?type=Flash';config.filebrowserUploadUrl = '/js/ckfinder/core/connector/java/connector.java?command=Qu ickUpload&type=Files';config.filebrowserImageUploadUrl = '/js/ckfinder/core/connector/java/connector.java?command=Qu ickUpload&type=Images';config.filebrowserFlashUploadUrl = '/js/ckfinder/core/connector/java/connector.java?command=Qu ickUpload&type=Flash';需要自己写这个上传附件和浏览服务器文件的方法，这哥们还真的自己写了，遗憾的是只给出部分代码。

CKEditor上传图片—配置CKFinder

CKEditor上传图片—配置CKFinder来源：/leolis/archive/2012/08/29/2662357.html在网站开发中，如果有发布类似新闻的图文混排需求时，CKEditor不失为一个很好的选择，下载地址如下：/download它的前身是FCKEditor，随着它的更新，上传图片的功能被分离出去了，现在如果需要实现上传图片，要么自己写代码，还有一种方法是使用CKFinder，下载地址如下：/download下面详细描述一下使用它们的时候如何配置。

CKEditor我下载的是3.6.4，CKFinder下载的是2.3 for ，首先解压所有的文件，然后将ckeditor和ckfinder文件夹放到网站的目录下，可以删除ckeditor和ckfinder文件夹下的_samples、_source 文件夹，将CKFinder.dll添加到站点的bin/文件夹中，然后在网站页面头部添加js的引用，具体路径根据自己放置的路径设置，如下：<script src="../editor/ckeditor/ckeditor.js" type="text/javascript"></script> <script src="../editor/ckfinder/ckfinder.js" type="text/javascript"></script>在页面中添加一个textarea,具体代码如下：<textarea name="individual" id="individual"runat="server"></textarea><script type="text/javascript">CKEDITOR.replace('individual');</script>接下来打开ckeditor文件夹下的config.js文件，在CKEDITOR.editorConfig = function (config) {};方法中添加如下代码：config.filebrowserImageBrowseUrl ='../editor/ckfinder/ckfinder.html?Type=Images';config.filebrowserFlashBrowseUrl='../editor/ckfinder/ckfinder.html?Type=Flash';config.filebrowserUploadUrl='../editor/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&t ype=Files';config.filebrowserImageUploadUrl='../editor/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&t ype=Images';config.filebrowserFlashUploadUrl='../editor/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&t ype=Flash';config.filebrowserWindowWidth= '800'; //“浏览服务器”弹出框的size设置config.filebrowserWindowHeight = '500';上面的路径也需要根据自己的设置。

在线编辑器ckeditor、文件管理器ckfinder安装及使用

在线编辑器ckeditor、⽂件管理器ckfinder安装及使⽤
概念与作⽤
在线编辑器也叫作富⽂本编辑器，是⼀种通过浏览器来对⽂字、图⽚、⾳频和视频等富⽂本进⾏在线编辑的⼀种⼯具，通常也就是
指HTML编辑器！
为什么要有在线编辑器？
其实，即使没有在线编辑器，我们也可以利⽤html标签对相关的内容进⾏排版和显⽰，但是html标签语⾔仅限于懂web技术的前端⼯程师，⽽且直接编写代码的效率⾮常低，同时也不能直接看到效果，为了提⾼内容编辑的效率以及普通⾮技术⼈员也能⽅便的操作，所以出现了在线编辑器！
分类
世⾯上的在线编辑器有很多，也各有各的优缺点，其中国外有⼀款⽐较成熟，也是⽬前国内使⽤的最多的⼀款叫作fckeditor，开源并且免费！
⽬前，fckeditor⼀分为⼆：变成了ckeditor（⽂本编辑器，免费）+ ckfinder（⽂件管理器，收费软件，可以上传⽂件等其他功能）
此外，⽬前使⽤的较多的还有百度编辑器！
Ckeditor下载地址：
/download
Ckfinder下载地址：
/ckfinder/download
Ckeditor的部署
Ckeditor属于外部的插件，可以放在Vendor⽬录下，但是由于在线编辑器⼀般只有后台才使⽤，所以更常见的做法是放在后台⽬录下！
在后台下创建Public⽬录，引⼊Ckeditor和Ckfinder
由于在线编辑器需要直接被⽤户访问到，所以我们可以在后台Back⽬录下创建⼀个Public⽬录，然后引⼊Ckeditor！
此外，还要在Public下创建分布式配置⽂件：
此外，再复制Ckfinder进来，需要和Ckeditor处于同级⽬录：
Ckeditor的⽬录结构说明。

Ckeditor与ckfinder整合forJAVA(支持文件上传)

Ckeditor + ckfinder整合for JA V A（支持文件上传）2012-06-20备注：本人使用的开发工具为eclipse 3.7.0，服务器为：apache-tomcat-7.0.20，仅供参考。

第一步：工具下载：首先下载：CKEditor本人下载并使用的版本是：CKEditor 3.6.3下载地址：/download 如下图所示：下载完成后，文件为：ckeditor_3.6.3.zip接着下载:ckfinder下载地址：/download 如下图所示：下载完成后，文件为：ckfinder_java_2.2.1.zip第二步，新建项目打开Ecilpse-->File-->New-->Dynamic Web Project 项目名：CkeditorForJava，如下图所示：单击“下一步”，如下图所示单击“下一步”，如下图所示修改Content directory 为 WebRoot。

最终点完成。

第三步，整合解压ckeditor_3.6.3.zip，然后将ckeditor文件夹全部考到WebRoot根目录下。

完成后项目结构如下图所示：修改ckeditor文件夹下的config.js文件，代码如下：/*Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.For licensing, see LICENSE.html or /license*/CKEDITOR.editorConfig = function( config ){// Define changes to default configuration here. For example: // nguage = 'fr';// config.uiColor = '#AADC6E';//配置默认配置nguage = '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 的路径选择要正确。

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();到目前为止，第一个需求实现了。