CKEDITOR+CKFINDER的图片上传配置(C#/asp.net/php) 本文来源与网络 CKEDITOR+CKFINDER的图片上传配置(C#/asp教程.net/php教程) php keditor的代码全部重写，但里面没有了上传功能，只是一个纯粹的文件在线编辑器，如果需要上传图片，还需要下载ckfinder。 首先去官方上下载源代码，然后分别解压缩在网站根目录里（默认ckeditor和ckfinder文件夹里，一般不需要改动） 在所需要的页面插入JS <br> var editor = CKEDITOR.replace(‘timu’);<br> CKFinder.SetupCKEditor(editor, ‘../ckfinder/’); //ckfinder总目录的相对路径.<br> 再修改ckfinder/config.php 里CheckAuthentication函数，返回改为ture（默认为fasle） 这样就能够实现上传功能了。 如果上面的方法不行可以试一下 1. 下载安装 CKEditor: http://ckeditor.com/ 解压下载到的CKEditor放到网站的路径中即可 2. 下载安装 CKFinder: http://ckfinder.com/download 解压下载到的CKFinder放到与CKEditor同一目录中即可 3. 在网页中使用 CKEditor 和 CKFinder: CKEditor 实际是替换一个 textarea 标签，所以把textarea放到一个form中，当提交到php服务器端，使用$_GET['xxx'] 或者 $_POST['xxx'] 取得编辑好的数据。注意，因为 CKEditor 要替换 textarea，所以相应的javascript 代码"CKEDITOR.replace(xxxxxx)" 要放在 textarea 的后面。 最简单的方法，直接新建一个test.html文件（和ckeditor、ckfinder处于同一级目录）使用下面的例子修改一下即可。在浏览器里浏览test.html就可以在网页中看到 CKEditor 了，兴奋吧。 CKEditor 4. 配置CKFinder进行上传图片，Flash等。 到这里，点击 "Image" 按钮，在弹出的窗口中的 "Upload" 标签中已经看到上传按钮了，但是在上传文件时失败。因为CKFinder还没有配置好。需要创建上传文件的目录和修改 ckfinder/config.php 里的三个地方: a. 创建保存上传文件的目录，如upload （把upload文件夹也放在和ckeditor、ckfinder处于同一级目录，三个目录都位于项目目录下） 其路径为 /upload/ [For Linux: 把其权限设置为php server可读写，最简单的是 chmod 777 upload 这样php server才有权限往里面保存文件.] b. 找到配置文件（ckfinder/config.php）第32行，把 function CheckAuthentication () { return false; } 修改成 function CheckAuthentication() { return true; } c. 找到第63行，把 $baseUrl 的值改成保存上传文件存目录的URL， 如 $baseUrl = '/项目名/upload/';（这里的地址要从项目目录开始的绝对路径，确定上传目录已经存在） d. 找到第82行，删除 $baseDir = resolveUrl($baseUrl); 修改 $baseDir 为上传文件目录的绝对路径 ，（本地测试的时候要从磁盘的跟目录下开始，即C:/或者D:/的直接目录） 如$baseDir = '/Apache2/htdocs/ck/upload/'; （Apache2是D:/盘下的直接目录） 这 是因为resolveUrl($baseUrl)函数不能正常工作。 至此，可以使用 CKEditor 和 CKFinder 上传文件了。 对上面这个小例子中服务器端的b.php代码： header("Content-Type:text/html; charset=utf-8"); $str = $_POST['editor1']; echo $str; ?> 可以看到，在点击submit按钮后，服务器端收到了CKEditor中的内容，并使用echo输出，生成一个与CKEditor里面编辑的完全一样的内容。在服务器端可以把收到的内容保存到数据库教程中。然后再读出在相应的页面显示出来。 --------------------------------------------------------------------------------------------------------- fckeditor的上传图片中，有一个可以浏览服务器目录的功能，如果在后台，是可以开放使用的，如果是前台用户访问就不要使用这个功能。 不过浏览图片不是很方便，ckfinder 就很好的简单了这个问题 fckeditor的配制如下: 修改文件： fckeditoreditorfilemanagerconnectorsphpconfig.php // $Config['Enabled']改过true，允许上传 $Config [ 'Enabled' ] = true ; //$Config['UserFilesPath'] 设置相对于根目录的上传目录，目前来说没有用，因为实际上传在下面的配制中 $Config [ 'UserFilesPath' ] = "/upload/" ; //$Config['UserFilesAbsolutePath'] 上传的图片位置,包括根目录 $Config [ 'UserFilesAbsolutePath' ] = '/public/upload/' ; 设置ckfinder的config.php $baseUrl = '/upload/' ; // 在CheckAuthentication 改为return true,这里可以加入自己的权限判断。 function CheckAuthentication( ) { return true ; } 程序代码中使用 $fckeditor = new FCKeditor( $fckname ) ; $fckeditor -> BasePath = '/js/fckeditor/' ; //$toolbar_set 设置工具栏 默认值: Default $fckeditor -> ToolbarSet = $toolbar_set ; // $width 宽度 $fckeditor -> Width = $width ; // $height 高度 $fckeditor -> Height = $height ; //皮肤文件的路径 $fckeditor -> Config = array ( 'SkinPath' => $SkinPath ) ; $fckeditor -> Value = $value ; //在fckedior这前使用CKFinder CKFinder:: SetupFCKeditor ( $fckeditor , "/js/ckfinder/" ) ; $fckhtml = $fckeditor -> Create ( ) ; 下面为详细的c#配置方法 CKEditor和CKFinder的最新版可以到官方网站（http://cksource.com）上下载获得。 把以上两个资源放到网站的根目录： /CKEditor 和 /CKFinder (不区分大小写) 在页面使用 CKEditor： hello world! <br> CKEDITOR.replace('content', { height: 200, width: 520 });<br> CKEditor 本身不自带上传功能，所以需要配合CKFinder才可以实现上传 第一步：网站需要引用CKFinder的dll（目录：/CKFinder/bin/Release/CKFinder.dll） 第二步：配置CKEditor的config.js (目录：/CKEditor/config.js ) 在CKEDITOR.editorConfig函数里加上，不需要的功能可以去掉 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按钮(标签) 配置完成后CKEditor 就带有上传功能了，但假如上传图片时，图片的文件是用原来图片的名字，想改为随机文件名呢，怎么办？接着看第三步。 第三步：修改CKFinder的源码。CKFinder自带有源码，目录：/CKFinde/_source 在VS里新建一个 现在的项目 指向CKFinde/_source/CKFinder.Net.sln 1) 打开/Settings/ConfigFile.cs文件 定位27行，添加一个属性：public bool RandomReName; //随机重命名 定位67行，给刚才的属性赋值：RandomReName = true; //默认值为true 保存关闭文件 2) 打开/Connector/Config.cs文件 定位62行，添加一个属性： public bool RandomReName { get { return Settings.ConfigFile.Current.RandomReName; } } 保存关闭文件 3) 打开/Connector/CommandHandlers/FileUploadCommandHandler.cs文件 定位64行，添加一句判断代码： if ( Config.Current.RandomReName) //使用随机名 sFileName = DateTime.Now.ToString("yyyyMMddHHmmssfff") + "." + sExtension; 保存关闭文件 4) 重新生成项目，把/ckfinder/_source/bin/Debug/CKFinder.dll覆盖/ckfinder/bin/Release/CKFinder.dll或者网站项目去掉之前加入的引用再重新从CKFinder.Net项目里的Dll 最后一步：打开/ckfinder/config.ascx 定位42行，添加一属性：（其实这个加不加都可以的，因为之前有设置默认值，但使用原名时一定要设置为false） //上传完毕后使用随机文件名 RandomReName = true; 保存关闭 好了，到此已经配置成功了，CKEditor 可以有上传功能了。其它的功能的设置，有空再继续研究~ 还要提醒一句：CKEditor 和 CKFinder 文件夹里有很多不需要的东西，例如名字带有下划线前辍的，.net项目不需要php,asp的。 如果上传文件出现错误：因为安全原因，文件不可浏览. 请联系系统管理员并检查CKFinder配置文件. 需要修改config.ascx文件中 public override bool CheckAuthentication() { reture false; } 修改为: public override bool CheckAuthentication() { // 窗体验证时用 return Request.IsAuthenticated; //reture true; 不推荐使用 }
