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>
  • 相关阅读:
    BZOJ2219数论之神——BSGS+中国剩余定理+原根与指标+欧拉定理+exgcd
    Luogu 3690 Link Cut Tree
    CF1009F Dominant Indices
    CF600E Lomsat gelral
    bzoj 4303 数列
    CF1114F Please, another Queries on Array?
    CF1114B Yet Another Array Partitioning Task
    bzoj 1858 序列操作
    bzoj 4852 炸弹攻击
    bzoj 3564 信号增幅仪
  • 原文地址:https://www.cnblogs.com/zcm123/p/2982982.html
Copyright © 2011-2022 走看看