CKEditor 3.0.1 在 asp.net 下进行配置的方法

最新推荐文章于 2024-10-28 09:59:57 发布

冷月宫主

最新推荐文章于 2024-10-28 09:59:57 发布

阅读量2k

点赞数

分类专栏： javascript C# ajax 文章标签： asp.net textbox licensing class styles function

javascript 同时被 3 个专栏收录

311 篇文章 0 订阅

订阅专栏

260 篇文章 1 订阅

订阅专栏

ajax

213 篇文章 0 订阅

订阅专栏

CKEditor 3.0.1 在 asp.net 下进行配置的方法：

官方网站：CKEditor（Fully functional, open source editor, with source code included）

下载地址：CKEditor 3.0.1（released on 16 October 2009）

1、下载 ckeditor_3.0.1.zip 并解压到 ckeditor（在根目录下）。

2、在 aspx 页面或者 master 模板页 <head> 标签中载入 ckeditor.js：

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

　　在<body>标签中使用ckeditor：

<asp:TextBox id="txtContent" class="ckeditor" TextMode="MultiLine" Text='<%# Bind("info") %>' runat="server"></asp:TextBox>

　　与其他 .net 控件使用方法相同，设置 Text='<%# Bind("info") %>' 可以方便与数据源进行交互。

3、config.js 的自定义

/*
Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/

CKEDITOR.editorConfig = function(config) {

    // Define changes to default configuration here. For example:
    config.language = 'zh-cn'; //配置语言
    // config.uiColor = '#FFF'; //背景颜色
    // config.width = 400; //宽度
    config.height = 400; //高度
    config.skin = 'v2'; //编辑器样式

// 取消 “拖拽以改变尺寸”功能
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']
    ];

};

4、要精简 ckeditor 可以将 _samples、_source 文件夹删除，lang 目录下可以只保留en.js、zh.js、zh-cn.js 三个语言文件。

5、CKEditor 不具备上传功能，需要集成 CKFinder 才能实现上传功能。

CKFinder 1.4.1.1 与 CKEditor 3.0.1 进行集成的配置方法：

官方网站：CKFinder（powerful and easy to use Ajax file manager for web browsers）

下载地址：CKFinder 1.4.1.1 for Asp.net（updated 02.10.2009）

6、下载 ckfinder_aspnet_1.4.1.1.zip 并解压到 ckfinder（在根目录下）。

7、打开 " /ckfinder/config.ascx "，修改 BaseUrl 为 BaseUrl = "~/ckfinder/userfiles/";
　 // 注意“~”
　 // 以 userfiles 为默认路径，其目录下会自动生成images、flash等子目录。

8、在 ckeditor/config.js 中集成 ckfinder。

// 自定义 CKEditor 样式
CKEDITOR.editorConfig = function(config) {
……
}

// 在 CKEditor 中集成 CKFinder，注意 ckfinder 的路径选择要正确。
CKFinder.SetupCKEditor(null, '../ckfinder/');

9、在 aspx 页面或者 master 模板页 <head> 标签中载入 ckfinder.js：

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

　　在<body>标签中使用ckfinder：

<asp:TextBox id="txtContent" class="ckeditor" TextMode="MultiLine" Text='<%# Bind("info") %>' runat="server"></asp:TextBox>

　　与其他 .net 控件使用方法相同，设置 Text='<%# Bind("info") %>' 可以方便与数据源进行交互。

10、可以将 _samples、_source 文件夹删除，lang 目录下可以只保留en.js、zh.js、zh-cn.js 三个语言文件。

常见错误排除方法：

症状：因为安全原因，文件不可浏览。请联系系统管理员并检查CKFinder配置文件。

语句：
public override bool CheckAuthentication()
{
reture false;
}

原因：未设置用户身份验证或者用户未登录。

症状：未知错误

语句：
public override bool CheckAuthentication()
{
reture true;
}

原因：设置不进行用户身份验证，但是 BaseUrl 路径不对。