ckEditor 和 ckFinder 的使用
2012-03-22 14:37 xtsjh0001 阅读(496) 评论(0) 编辑 收藏 举报介绍》
CKEditor是新一代的FCKeditor，是一个重新开发的版本。
CKFinder是一个功能强大的ajax文件管理器。
----------------------------------------------------------
网址：
CKEditor ：http://ckeditor.com/
CKFinder ：http://ckfinder.com/
=============== 《CKEditor 的使用》=======================
准备工作
1.下载CKEditor并将其解压到Web根目录下
2. CKEditor的配置（config.js文件）
详细: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. 在页面<head>中加载 ckeditor.js：
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
2.修改页面的page指令ValidateRequest="false"
<%@ Page Language="C#" ValidateRequest="false" %>
3. 在<body>标签中使用ckeditor：
<!-- 必须定义 class="ckeditor" -->
<asp:TextBox ID="ckContent"
class="ckeditor"
TextMode="MultiLine"
Text='<%# Bind("info") %>'
runat="server">
</asp:TextBox>
4.获取编辑器中的内容
lblView.Text = Server.HtmlEncode(this.ckContent.Text);
5.设置编辑器中的内容
txtContent.Text = Server.HtmlDecode("<h1>设置内容</h1>");
=============== 《CKFinder 的使用》=======================
准备工作
1. 下载CKFinder的Asp.NET版，将其解压到Web根目录下
2. 复制/bin/Release目录下的ckfinder.dll文件至bin目录
----------------------------------------------------------
CKFinder的配置
1. 指定文件上传的默认路径
打开 " ckfinder/config.ascx"，为SetConfig方法中的 BaseUrl 指定默认路径。
如以userfiles为默认路径，其目录下会自动生成images、flash等子目录。
BaseUrl = " ~/ckfinder/userfiles/"; //注意根目录必须用“ ~/ ”。
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/";
3.症状：访问带有CKFinder的页面时报错“HTTP 错误 404 - Not Found”
解决：修改CKFinder控件的BasePath属性为ckfinder目录的相对路径
-------------------------------------------
另一种配置方法
<asp:TextBox ID="ckContent" runat="server" TextMode="MultiLine"></asp:TextBox>
1、在下面添加如下代码
<script type="text/javascript">
//<![CDATA[
CKEDITOR.replace(
'<%=ckContent.ClientID %>' ,
{
skin : 'office2003', //设置皮肤
enterMode : Number( 2), //设置enter键的输入1.<p>2为<br/>3为<div>
shiftEnterMode : Number( 1), // 设置shiftenter的输入
}
);
//]]>
</script>
2、在ckFinder中的配置
filebrowserBrowseUrl:'<%=ResolveUrl("~/ckfinder/ckfinder.html")%>',
filebrowserImageBrowseUrl:'<%=ResolveUrl("~/ckfinder/ckfinder.html?Type=Images")%>',
filebrowserFlashBrowseUrl:'<%=ResolveUrl("~/ckfinder/ckfinder.html?Type=Flash")%>',
filebrowserUploadUrl:'<%=ResolveUrl("~/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files")%>',
filebrowserImageUploadUrl:'<%=ResolveUrl("~/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images")%>',
filebrowserFlashUploadUrl:'<%=ResolveUrl("~/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash")%>'
3.修改config.ascx文件中的BaseUrl = "/uploads/" （文件上传目录） 和CheckAuthentication()上传身份验证。
4.排除示例文件夹中的fckeditor相关的文件，或者直接删除。 （引用了fckeditor相关的命名空间）
有fckeditor.aspx popup.aspx popups.aspx.三个文件
---------------示例：用户控件 mpckeditor.ascx --------------------------
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="mpckeditor.ascx.cs" Inherits="mpckeditor" %>
<script language="javascript" type="text/javascript" src='<%=ResolveUrl("~/ckeditor/ckeditor.js")%>'></script>
<asp:TextBox ID="mckeditor" runat="server" TextMode="MultiLine"></asp:TextBox>
<script type="text/javascript">
//<![CDATA[
CKEDITOR.replace(
'<%=mckeditor.ClientID %>',
{
skin : 'office2003',
enterMode : Number( 2),
shiftEnterMode : Number( 1),
filebrowserBrowseUrl:'<%=ResolveUrl("~/ckfinder/ckfinder.html")%>',
filebrowserImageBrowseUrl:'<%=ResolveUrl("~/ckfinder/ckfinder.html?Type=Images")%>',
filebrowserFlashBrowseUrl:'<%=ResolveUrl("~/ckfinder/ckfinder.html?Type=Flash")%>',
filebrowserUploadUrl:'<%=ResolveUrl("~/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files")%>',
filebrowserImageUploadUrl:'<%=ResolveUrl("~/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images")%>',
filebrowserFlashUploadUrl:
'<%=ResolveUrl("~/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash")%>'
}
);
//]]>
</script>
---------------------- 后台CS文件----------------
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class mpckeditor : System.Web.UI.UserControl
{
public string Value
{
set { mckeditor.Text = Server.HtmlEncode(value); }
get { return Server.HtmlDecode(mckeditor.Text); }
}
protected void Page_Load(object sender, EventArgs e)
{
}
}
