CKEditor 3.6.2+CKFinder2.2.2配置,实现文件上传

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刚入门,也是第一次发博客,望多多指教。

原文地址:https://www.cnblogs.com/zyh1989/p/2592605.html