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文件，修改授权规则和上传目录。

在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删掉。

Ckeditor笔记1.获取ckeditor；2.创建页面，我们的ckeditor是基于textarea，也就是我们首先要创建一个textarea；3.将ckeditor文件夹拷贝到我们相应的目录下；4.在页面中引入ckeditor，就是js的引用5.在页面中使用ckeditor，实际上就是通过代码将textarea替换成在线编译器注意：尽量把这个代码写在form的后面。

6.测试，能不能用，好不好用在后台，php这边，直接获取其内容，和原先没有变化在前端，js如何来获取7.测试是否可以提交已经格式化好的内容。

分两种情况(1).直接在网上拷贝(ok)(2).原创，先写一个word文档(bad)本地路径，首先图片是否在本地存在还是个问题。

是否允许js来访问本机上的资源。

(不可以的)原因何在？Ckfinder笔记1.下载和ckeditor有所不同，而ckfinder它有语言之分，我们在下载的时候要选择正确的版本；2.设计一个界面3.将ckfinder拷贝到相应的目录中，然后引入ckfinder文件4.书写js来完成上传功能可以弹出这个窗口，但是提示打开config.php文件，要改三个地方(1).更改权限设置(2).先创建一个文件夹uploads,然后来设置其路径(3).设置绝对路径5.添加如下代码在你选择图片之后，将url显示到文本框中。

对于中文名称的图片，会产生乱码。

要解决怎么办？思路：对于中文路径的图片，我们可以将其进行更名在E:\APMServ5.2.6\www\htdocs\php\ckeditor_ckfinder\ckfinder\core\connector\p hp\php5\CommandHandler当中，有一个文件fileupload.php，添加如下代码：Ckeditor和ckfinder整合很简单，就是一个设置，代码特别麻烦，不要记，但要知道怎么来配1.将ckfinder拷贝到和ckeditor在同一个目录中。

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" 标签中已经看到上传按钮了，但是在上传文件时失败。

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

CKFinder 的使用准备工作1. 下载CKFinder的版，将其解压到Web根目录下2. 复制/bin/Release目录下的ckfinder.dll文件至站点bin目录3. 精简目录：_samples文件夹（示例文件，可以删除）_source文件夹（源程序文件，可以删除）CKFinder的配置1. 打开” \ckfinder\config.ascx “，为SetConfig方法中的BaseUrl 指定默认路径湘潭网站建设，如：// 以userfiles 为默认路径，其目录下会自动生成images、flash等子目录。

BaseUrl = ” ~/ckfinder/userfiles/”;// NOTE：注意“ ~/ ”。

2. 与CKEditor集成打开CKEditor目录中的config.js文件在function 函数中复制代码代码如下:// 自定义CKEditor 样式CKEDITOR.editorConfig = function(config) {……};加入如下内容：复制代码代码如下:// 在CKEditor 中集成CKFinder，注意ckfinder 的路径选择要正确。

config.filebrowserBrowseUrl = location.hash + …/ckfinder/ckfinder.html‟;config.filebrowserImageBrowseUrl = location.hash +…/ckfinder/ckfinder.html?Type=Images‟;config.filebrowserFlashBrowseUrl =location.hash+‟/ckfinder/ckfinder.html?Type=Flash‟;config.filebrowserUploadUrl = location.hash +…/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Fil es‟;config.filebrowserImageUploadUrl = location.hash +…/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Im ages‟;config.filebrowserFlashUploadUrl = location.hash +…/ckfinder/core/connector/aspx/connector.aspx?command=QuickUp load&type=Fla sh‟;// config.filebrowserWindowWidth = ‟800′;// config.filebrowserWindowHeight = ‟500′;CKFinder的应用1. 在工具栏中添加站点根目录bin目录中的ckfinder.dll控件2. 拖放控件到Web页面3. 修改CKFinder控件属性BasePath为ckfinder目录的相对路径常见问题1. 症状：因为安全原因，文件不可浏览。

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

CKEditor + CKFinder 配置2010年04月21日星期三 23:14CKEditor：1.解压CKEditor到webRoot目录，在应用页面加载其ckeditor.js ;2.页面textarea：<textarea cols=”80″; name=”editor1″ rows=”10″></textarea>CKFinder：3.解压CKFinder到webRoot目录（最好与CKEditor同级），在应用页面加载其ckfinder.js ;4.页面script：（最好textarea之后）if (typeof CKEDITOR == ‘undefined’) {document.write(’加载CKEditor失败’);}else {var editor = CKEDITOR.replace(’editor1′);CKFinder.SetupCKEditor(editor, ‘../ckeditor/ckfinder/’); //ckfinder 总目录的相对路径.}整合：（把俩js加载到同一文件其实就已经基本整合好了，还需要修改的配置如下）5.打开\ckfinder\config.php，修改$baseUrl = ‘（上传附件的存放路径）’; //以webRoot为起始的绝对路径，其目录下会自动生成images、flash等子目录；默认是在webRoot的根目录下，注意修改。

至此配置完毕，如果需要自定义界面，可进行以下的高级修改：6.在ckeditor\config.js中的CKEDITOR.editorConfig里加入以下需要自定义的配置代码：//字体.config.font_names = '宋体;楷体_GB2312;新宋体;黑体;隶书;幼圆;微软雅黑;Arial; Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana;';//工具按钮.config.toolbar=[['Source','-','Save','NewPage','Preview','-','Templates'],['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print','SpellChecker','Scayt'],['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFo rmat'],['Form','Checkbox','Radio','TextField','Textarea','Select','B utton','ImageButton','HiddenField'],'/',['Bold','Italic','Underline','Strike','-','Subscript','Supers cript'],['NumberedList','BulletedList','-','Outdent','Indent','Blockq uote'],['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'] ,['Link','Unlink','Anchor'],['Image','Flash','Table','HorizontalRule','Smiley','SpecialCh ar','PageBreak'],'/',['Styles','Format','Font','FontSize'],['TextColor','BGColor'],['Maximize','ShowBlocks','-','About']];//宽度config.width = 500;//高度config.height = 400;//皮肤config.skin='v2';安装CKFinder后才能有上传功能:第二步：设置CKFinder的上传功能由于本次CKEditor全新改版，没有提供文件上传功能，所以选择整合CKFinder 是个不错的选择需要修改一下CKEditor插件文件夹下的JS源码，以image插件为例（Flash及Files同理）：Code//将下边的代码做一些修改//{type:'button',id:'browse',align:'center',label:mon.brows eServer,hidden:false,filebrowser:'info:txtUrl'}]}]},//2009-07-13 将浏览服务器按钮置为显示状态（hidden: false）,增加onClick 函数，用于打开ckfinder页面,紧接着上面的代码添加{ type: 'button', id: 'browse', align: 'center', label:mon.browseServer, hidden: false, filebrowser: 'info:txtUrl', onClick: function() { var finder = new CKFinder(); finder.BasePath = '../ckfinder20090716/'; finder.SelectFunction = SetFileField;finder.Popup(); } }]}]},在方法体外增加下边的函数//用于取回 ckfinder 返回的图片地址并对路径文本框和预览图片进行赋值function SetFileField(fileUrl){//获取主Div下的所有文本框控件var inputStr =document.getElementById("cke_txtContent_dialog").getElementsByTagName ("Input");for(var i=0; i<inputStr.length; i++){if(inputStr[i].type=="text"){//第一个输入框控件是图像路径，得到ID，设置新的图片路径CKEDITOR.document.getById(inputStr[i].id).setValue(fileUr l);break ;}}CKEDITOR.document.getById('previewImage').setAttribute('src', decodeURI(fileUrl));}第三步：CKFINDER上传问题：出现“因为安全原因，文件不可浏览. 请联系系统管理员并检查CKFinder配置文件“整合后会出现“因为安全原因，文件不可浏览. 请联系系统管理员并检查CKFinder配置文件“The Solution:1. There is no write access for the default upload folder $baseUrl = '/userfiles/'; in ckfinder/config.php.对于目标文件夹$baseUrl = '/userfiles/';没有写入权限2. This is maybe because the Return value of Funcation CheckAuthentication() is always FALSE by default in ckfinder/config.php. Change the Validation Condition according to your condition, not recommend to set the return value to true directly.因为出于安全考虑ckfinder/config.php文件中的CheckAuthentication()函数默认返回值是false, 需要手动修改验证条件, 不建议直接返回true好了，最后一步了，由于ckfinder不是免费的，所以默认情况下会在上传页面中有红色的广告提示，虽然不影响使用，但总是觉得不爽。