asp.net中使用CKEditor
CKEditor是新一代的FCKeditor,是一个重新开发的版本。CKEditor是全球最优秀的网页在线文字编辑器之一
网址:
CKEditor :http://ckeditor.com/
CKFinder :http://ckfinder.com/ 如果要上传文件,则需使用它的插件ckfinder,如果我们只用它的在线编辑功能,那么可以不使用和配置ckfinder(我就是)
一、CKEditor 的使用
准备工作
1. 下载CKEditor并将其解压到Web根目录下
2. 精简目录:
_samples文件夹(示例文件,可以删除)
_source文件夹(源程序文件,可以删除)
changes.html(更新列表,可以删除)
install.html(安装指向,可以删除)
license.html(使用许可,可以删除)
CKEditor的配置(config.js文件)
3.使用
在需要载入编辑器的页面导入脚本文件
<script language="javascript" type="text/javascript" src='<%=ResolveUrl("~/ckeditor/ckeditor.js")%>'></script> ,修改页面的page指令ValidateRequest="false"
ok,再丢一个文本框<asp:TextBox ID="txtContent" class="ckeditor" TextMode="MultiLine"
Text='<%# Bind("info") %>' runat="server"></asp:TextBox>
注意:要设置class="ckeditor"
好了。现在运行页面就可以看到很漂亮的界面了,如果只要在线编辑功能的话就已经大功告成了。
//获取编辑器中的内容
Server.HtmlEncode( this.txtContent.Text);
//设置编辑器中的内容
this.txtContent.Text = Server.HtmlDecode("要设置的内容");
二、如果需要上传功能,则还需配置下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.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';
1. 在工具栏中添加站点根目录bin目录中的ckfinder.dll控件
2. 拖放控件到Web页面
常见问题
1. 症状:因为安全原因,文件不可浏览。请联系系统管理员并检查CKFinder配置文件。
原因:未设置用户身份验证或者用户未登录。
解决:在CKFinder的config.ascx文件中修改
public override bool CheckAuthentication()
{
return false; //====这里改为true
}
2. 症状:未知错误
原因:设置不进行用户身份验证,但是 BaseUrl 路径不对。
解决:在CKFinder的config.ascx文件中的public override void SetConfig() 修改
// 以userfiles 为默认路径,其目录下会自动生成images、flash等子目录。
BaseUrl = " ~/ckfinder/userfiles/";
// NOTE:注意“ ~/ ”。
3. 症状:访问带有CKFinder的页面时报错“HTTP 错误 404 - Not Found”
解决:修改CKFinder控件的BasePath属性为ckfinder目录的相对路径
解决完所有问题后,当点击CKEditor 中上传时,会自动调用出CKFinder控件