zoukankan      html  css  js  c++  java
  • Asp.net 中配置 CKEditor和CKFinder

    一、官方Download

    1、CKEditor :点击CKEditor.NET标题下的“Download zip”按钮

    此处使用当前最新版本“CKEditor.NET 3.5.2, released on 7 March 2011”

    2、CKFinder :点击Asp.net标签下的“Download zip”或者“Download tar.gz”按钮(PS:两个按钮下载的内容一样,说明

    此处使用当前最新版本“version: 2.0.2, updated 03.03.2011”

    ——CKEditor是新一代的FCKEditor,很明显的不同点是CKEditor中文件上传功能独立出来了,需要配合使用CKFinder才能实现。

     

    二、具体配置顺序

    1、在项目中添加对应的文件

    右击网站,添加引用。依次添加两个文件夹中“\bin\Debug” 中的dll文件——CKEditor.NET.dll、CKFinder.dll

    2、将文件夹“ckeditor”、“ckfinder”添加到网站的根目录下

    注意,下载的文件中包括很多用不到的文件,可以稍微清理一下:

    此版本对于CKEditor只需要“\_Samples”文件夹下的“ckeditor”文件夹即可,其余都可不要。

    _source文件夹(源程序文件,可以删除)
    changes.html(更新列表,可以删除)
    install.html(安装指向,可以删除)
    license.html(使用许可,可以删除)

    3、修改配置文件

    (1)CKEditor配置:打开“ckeditor\config.js”文件,根据需要添加配置信息

    CKEDITOR.editorConfig = function(config) {

    config.skin = 'v2'; //选择皮肤,源文件在“ckeditor\skins\”中
    config.resize_enabled = false;

    // 基础工具栏
    // config.toolbar = "Basic";    
    // 全能工具栏
    // config.toolbar = "Full";    
    // 自定义工具栏
    config.toolbar =
    [
    ['Source', '-', 'Preview'], ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord'],
    ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'], 
    ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote', 'ShowBlocks'], '/',
    ['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript'],
    ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'], ['Link', 'Unlink', 'Anchor'], 
    ['Image', 'Flash', 'Table', 'HorizontalRule', 'SpecialChar'], '/',
    ['Styles', 'Format', 'Font', 'FontSize'], ['TextColor', 'BGColor'], ['Maximize', '-', 'About']
    ];

    }

    (2)在CKEditor中集成CKFinder,注意对应文件的路径

    将下面的内容继续添加到“ckeditor\config.js”文件中

    CKEDITOR.editorConfig = function(config) {
    ……
    config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html'; //不要写成"~/ckfinder/..."或者"/ckfinder/..."
    config.filebrowserImageBrowseUrl = 'ckfinder/ckfinder.html?Type=Images';
    config.filebrowserFlashBrowseUrl = 'ckfinder/ckfinder.html?Type=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';
    
    config.filebrowserWindowWidth = '800';  //“浏览服务器”弹出框的size设置
    config.filebrowserWindowHeight = '500'; 
    }
    CKFinder.SetupCKEditor(null, '../ckfinder/');//注意ckfinder的路径对应实际放置的位置
     
    (3)CKFinder的配置:

    打开“ckfinder\”下的用户控件config.ascx,更改其BaseUrl路径:

    BaseUrl = "~/ckfinder/userfiles/";//or BaseUrl = "ckfinder/userfiles/";

    并且更改:

    public override boolCheckAuthentication()  {
            //return false;
           
    return true; //此处直接设置为true有一些危险,正式使用时要适当加入自己的判断逻辑

    }

    至此,配置工作终于完成啦。。

     

    三、在页面应用CKEditor控件

    1、在页面的<head>中添加对应的js引用:

        <script type="text/javascript" language="javascript" src="ckfinder/ckfinder.js"></script>
        <script type="text/javascript" language="javascript" src="ckeditor/ckeditor.js"></script>
    

    2、然后,在<body>中需要放置该控件的位置加入如下代码,分别有以下几种使用方法:

    (1)给控件添加指定的class属性
        <textarea id="textarea1" name="editor1" class="ckeditor">hello!</textarea>
    服务器控件:
        <asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" CssClass="ckeditor"></asp:TextBox>
    
     
    (2)注入js代码——此处js代码最好写在控件之后,也可以写在<head>中
        <textarea id="textarea1" name="editor1">hello!</textarea>
        <script type="text/javascript">
            CKEDITOR.replace('editor1', { height:400, 800 }); 
        </script>
    服务器控件:
        <asp:TextBox ID="mckeditor" runat="server" TextMode="MultiLine"></asp:TextBox>
        <script type="text/javascript">
            CKEDITOR.replace('<%=mckeditor.ClientID %>');
        </script>
  • 相关阅读:
    20155203 《深入理解计算机系统》第五章学习总结
    2017-2018-1 20155203 20155204 实验五 通讯协议设计
    20155203 《信息安全系统设计基础》第十一周学习总结
    2017-2018-1 20155203 20155204 实验四 外设驱动程序设计
    课上第六章测试(补)
    20155203 《信息安全系统设计基础》第九周学习总结
    2017-2018-1 20155203 实验三 实时系统
    mypwd的编译和测试
    第二周 第三周 课下实践补交
    课上测试 补交及重做 深刻的教训
  • 原文地址:https://www.cnblogs.com/zcm123/p/2982982.html
Copyright © 2011-2022 走看看