ASP.NET下CKEditor3.6.4结合CKFinder2.3实现文本编辑器的上传功能

说明：CKEditor和CKFinder只有在ASP.NET Web项目和在ASP.NET网站中路径的设置稍有不同

1、ckeditor配置：

ckeditor是fckeditor的替换版本，功能比fckeditor更强大。

下载：由于针对asp.net开发，所以可以去官网http://ckeditor.com/download下载，注意可以直接找到“CKEditor for ASP.NET”下载。下载后解压。

添加源文件到项目：解压后，将ckeditor_aspnet_3.6.2\_Samples文件夹下的ckeditor文件夹复制到你的visual studio的解决方案资源管理器中项目的根目录下。

添加引用：在项目中添加引用，将ckeditor_aspnet_3.6.2\_Samples\bin文件夹下的CKEditor.NET.dll加入到项目中。

配置：在web.config中：

2、ckfinder配置：

下载：可以去http://ckfinder.com/download下载，注意选择asp.net，下载后解压。

添加源文件到项目：解压后，将ckfinder_aspnet_2.3\ckfinder文件夹复制到你的项目根目录下。然后删除ckfinder_aspnet_2.2.2\ckfinder文件夹下的_samples、_source、bin文件夹（这些文件夹是生成ckfinder.dll程序集和测试用的）。

添加引用：将解压文件夹下ckfinder_aspnet_2.3\ckfinder\bin\debug下的ckfinder.dll添加到网站引用。（注意：也可以不添加此引用。如果需要将ckeditor绑定到ckfinder就需要）。

3、构建页面：

将ckeditor控件加入到测试页面中，

（1）若当前是Web应用程序即WebApplication，则相关属性的路径设置如下，适用于将来在IIS上部署的时候，直接部署成网站：

（2）若当前是网站即website，则相关属性的路径设置如下，适用于将来在IIS上部署的时候，部署成虚拟目录：

一定要注意：上述url相关属性配置，这些配置是连接ckeditor和ckfinder的关键（asp.net版本）。其他版本可参考：http://docs.cksource.com/CKEditor_3.x/Developers_Guide/File_Browser_(Uploader)

很多其他文章介绍说，在ckeditor的config.js中配置也是可以的。那就不需要上述url属性了。改成：

var instance = CKEDITOR.instances['editor1'];

if (instance) { CKEDITOR.remove(instance); }

CKEDITOR.replace('editor1',
    {
        filebrowserBrowseUrl: '/ckfinder/ckfinder.html',
        filebrowserImageBrowseUrl: '/ckfinder/ckfinder.html?Type=Images',
        filebrowserFlashBrowseUrl: '/ckfinder/ckfinder.html?Type=Flash',
        filebrowserUploadUrl: '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files',
        filebrowserImageUploadUrl: '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images',
        filebrowserFlashUploadUrl: '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash'
    });

再次注意：由于是使用ckeditor控件，所以上述代码中的前两行很重要，否则会提示id重复。

如果是在母版页中使用ckeditor控件，要注意使用ClientID属性。

4、配置ckfinder，允许客户端上传：

（1）首先找到ckfinder文件夹下的config.ascx，打开。

修改CheckAuthentication（）方法，将return false改成return true.（如果你没有修改的话，应该是第20行代码）

（2）如果要修改默认的用于存储上传文件的路径，可以修改SetConfig（）方法中的BaseUrl（默认是第34行代码），指定一个自定义文件夹，要注意此文件夹要有写入权限。默认是在/ckfinder/userfiles/，（适用于WebApplication），如果是网站WebSite，则路径应设置为~/ckfinder/userfiles/

默认设置下，图片文件存放于userfiles/images/，Flash文件存放于userfiles/flash/，文件存放于userfiles/files/

这样可以上传了。

发表于 2012-11-16 16:05 Lavenders 阅读(456) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

ASP.NET下CKEditor3.6.4结合CKFinder2.3实现文本编辑器的上传功能

公告