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

  • 相关阅读:
    python Matplotlib数据可视化神器安装与基本应用
    linux笔记
    appium自动化环境搭建
    C#实现局域网聊天 通讯 Socket TCP 多人
    layui 关闭弹出层方法
    allure生成漂亮的测试报告
    python内置测试框架unittest
    Python安全编程
    Python Web自动化测试
    Docker从入门到放弃
  • 原文地址:https://www.cnblogs.com/zyh1989/p/2592605.html
Copyright © 2020-2023  润新知