首页 > 编程 > .NET > 正文

asp.net CKEditor和CKFinder的应用

2024-07-21 02:53:40
字体:
来源:转载
供稿:网友
CKEditor和CKFinder在ASP.NET中的应用,需要的朋友可以参考下。
 
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: 
  <!-- 载入 CKEditor JS 文件 --> 
<script type="text/javascript" src="ckeditor/ckeditor.js"></script> 
2. 修改页面的page指令ValidateRequest="false" 
<%@ Page Language="C#" ValidateRequest="false" %> 
3. 在<body>标签中使用ckeditor: 
<!-- 使用 ckeditor 必须定义 class="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目录的相对路径


注:相关教程知识阅读请移步到编辑器频道。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表