CKEditor 3.6.2+CKFinder2.2.2配置,实现文件上传
1、准备CKEditor、CKFinder,这里分别用3.6.2、2.2.2版本
2、CKEditor解压,复制_Samples下的ckeditor文件夹到项目根目录,复制bin\debug\CKEditor.NET.dll到项目根目录下的Bin文件夹(没有可以自己创建);CKFinder解压,复制文件夹ckfinder到项目根目录,复制ckfinder\bin\Debug\CKFinder.dll到项目根目录。之后,在项目根目录上右击选择“添加引用”——“浏览”,依次添加项目根目录\Bin下之前放入的两个DLL。
3、配置CKEditor\config.js文件
打开CKEditor\config.js,添加下面代码。
CKEDITOR.editorConfig = function( config )
{
..........
config.filebrowserBrowseUrl = '../ckfinder/ckfinder.html'; //上传文件时浏览服务文件夹
config.filebrowserImageBrowseUrl = '../ckfinder/ckfinder.html?Type=Images'; //上传图片时浏览服务文件夹/// <reference path="../ckfinder/ckfinder.html" />
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按钮(标签)
.........
}
4、配置ckfinder\config.ascx文件
public override bool CheckAuthentication()
{
//return false;// 此处用于配置权限
return true;//测试可以使用,正式使用一定要加入验证代码
}
public override void SetConfig()
{
BaseUrl = "~/filefolder/";//上传文件的存储目录
}
5、引用
前台:
首先在<head></head>中添加如下两个文件的引用:
<script src="ckeditor/ckeditor.js" type="text/javascript"></script>
<script src="ckfinder/ckfinder.js" type="text/javascript"></script>
然后,拖控件CKEditorControl到前台页面,,并增加设置basePath="ckeditor/",示例如下:
<CKEditor:CKEditorControl ID="CKEditorControl1" runat="server" basePath="ckeditor/" ></CKEditor:CKEditorControl>
注:网上多是设置textarea,然后再用Js代码replace为CKEditor的,不知原因,望多多指教。
后台设置:
加入如下代码:
protected void Page_Load(object sender, EventArgs e)
{
.......
CKFinder.FileBrowser fb = new CKFinder.FileBrowser();
fb.BasePath = "ckfinder/";
fb.SetupCKEditor(CKEditorControl1);
..........
}
说明:上面的 basePath="ckeditor/" fb.BasePath = "ckfinder/"; 两个路径要注意,不要错
另外,若两个文件夹均为二级目录,如:根目录/admin下面,则路径应写为BasePath="admin/ckeditor3.6.2/"
fb.BasePath = "admin/ckfinder/";
6、其他
增加上传文件大小
通过更改Web.Config文件来改变单个上传文件的大小。
代码如下:
<system.web>
......
<httpRuntime maxRequestLength="49600" appRequestQueueLimit="60" executionTimeout="60" />
.........
</system.web>
其中maxRequestLength就是单个上传的文件大小了,这里是40M
本方法解决了出现错误“此程序无法显示网页”的问题
我做项目之前用过一次CKEditor+CKFinder,没有问题。但是这次用,点击上传后老是出现错“此程序无法显示网页”,路径配置都没问题,折腾了两天在网上也找不到详细的解决办法及原因说明,最后通过研究示例文件ckfinder2.2.2/_samples/aspx/ckeditor.aspx找到上面这种引用配置方法,其中黄色的部分是涉及的核心部分。
Asp.net刚入门,也是第一次发博客,望多多指教。