asp.net CKEditor和CKFinder的应用

　　CKEditor是新一代的FCKeditor，是一个重新开发的版本。CKEditor是全球最优秀的网页在线文字编辑器之一，因其惊人的性能与可扩展性而广泛的被运用于各大网站。而CKFinder是一个功能强大的ajax文件管理器。其简单的用户界面使得各类用户，不管是从高级专业人才，还是互联网初学者，都够直观、快速学习的学习使用它。

　　网址：

　　CKEditor ：http://ckeditor.com/

　　CKFinder ：http://ckfinder.com/

　　CKEditor 的使用

　　准备工作

　　1. 下载CKEditor并将其解压到Web根目录下

　　2. 精简目录：

　　_samples文件夹（示例文件，可以删除）

　　_source文件夹（源程序文件，可以删除）

　　changes.html(更新列表，可以删除)

　　install.html(安装指向，可以删除)

　　license.html(使用许可，可以删除)

　　CKEditor的配置（config.js文件）

　　详细api参数见:http://docs.cksource.com/ckeditor_api/,我的默认配置

复制代码代码如下:

　　// 自定义 CKEditor 样式

　　CKEDITOR.editorConfig = function(config) {

　　//配置默认配置

　　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'],

　　// ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', SpecialChar','PageBreak'],

　　// '/',

　　// ['Bold', 'Italic', 'Underline', '-', 'Subscript', 'Superscript'],

　　// ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'],

　　// ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],

　　// ['Link', 'Unlink', 'Anchor'],

　　// '/',

　　// ['Format', 'Font', 'FontSize'],

　　// ['TextColor', 'BGColor'],

　　// ['Maximize', 'ShowBlocks', '-', 'About']

　　// ];

　　};

　　CKEditor 的应用

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

　　2. 修改页面的page指令ValidateRequest="false"

　　<%@ Page Language="C#" ValidateRequest="false" %>

　　3. 在<body>标签中使用ckeditor：

　　<asp:TextBox ID="txtContent" class="ckeditor" TextMode="MultiLine"

　　Text='<%# Bind("info") %>' runat="server"></asp:TextBox>

　　4. 获取或设置编辑器中的内容

　　//获取编辑器中的内容

　　lblView.Text=Server.HtmlEncode( this.txtContent.Text);

　　//设置编辑器中的内容

　　//txtContent.Text = Server.HtmlDecode("<h1>设置内容</h1>");

　　CKFinder 的使用

　　准备工作

　　1. 下载CKFinder的Asp.NET版，将其解压到Web根目录下

　　2. 复制/bin/Release目录下的ckfinder.dll文件至站点bin目录

　　3. 精简目录：

　　_samples文件夹（示例文件，可以删除）

　　_source文件夹（源程序文件，可以删除）

　　CKFinder的配置

　　1. 打开 " \ckfinder\config.ascx "，为SetConfig方法中的 BaseUrl 指定默认路径，如：

　　// 以userfiles 为默认路径，其目录下会自动生成images、flash等子目录。

　　BaseUrl = " ~/ckfinder/userfiles/";

　　// NOTE：注意“ ~/ ”。

　　2. 与CKEditor集成

　　打开CKEditor目录中的config.js文件在function 函数中

复制代码代码如下:

　　// 自定义 CKEditor 样式

　　CKEDITOR.editorConfig = function(config) {

　　……

　　};

　　加入如下内容：

复制代码代码如下:

　　// 在 CKEditor 中集成 CKFinder，注意 ckfinder 的路径选择要正确。

　　config.filebrowserBrowseUrl = location.hash + '/ckfinder/ckfinder.html';

　　config.filebrowserImageBrowseUrl = location.hash + '/ckfinder/ckfinder.html?Type=Images';

　　config.filebrowserFlashBrowseUrl = location.hash+'/ckfinder/ckfinder.html?Type=Flash';

　　config.filebrowserUploadUrl = location.hash + '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files';

　　config.filebrowserImageUploadUrl = location.hash + '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images';

　　config.filebrowserFlashUploadUrl = location.hash + '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash';

　　// config.filebrowserWindowWidth = '800';

　　// config.filebrowserWindowHeight = '500';

　　CKFinder的应用

　　1. 在工具栏中添加站点根目录bin目录中的ckfinder.dll控件

　　2. 拖放控件到Web页面

　　3. 修改CKFinder控件属性BasePath为ckfinder目录的相对路径

　　常见问题

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

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

　　语句：

复制代码代码如下:

　　public override bool CheckAuthentication()

　　{

　　return false;

　　}

　　解决：在CKFinder的config.ascx文件中修改public override bool CheckAuthentication() 加入用户身份权限验证方法。

　　2. 症状：未知错误

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

　　语句：

复制代码代码如下:

　　public override bool CheckAuthentication()

　　{

　　return true ;

　　}

　　解决：在CKFinder的config.ascx文件中的public override void SetConfig() 修改

　　// 以userfiles 为默认路径，其目录下会自动生成images、flash等子目录。

　　BaseUrl = " ~/ckfinder/userfiles/";

　　// NOTE：注意“ ~/ ”。

　　3. 症状：访问带有CKFinder的页面时报错“HTTP 错误 404 - Not Found”

　　解决：修改CKFinder控件的BasePath属性为ckfinder目录的相对路径

教程首页更多教程