asp.net CKEditor和CKFinder的应用
程序员文章站
2022-03-07 08:57:11
ckeditor是新一代的fckeditor，是一个重新开发的版本。ckeditor是全球最优秀的网页在线文字编辑器之一，因其惊人的性能与可扩展性而广泛的被运用于各大网站。...
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目录的相对路径
网址：
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目录的相对路径
下一篇： 添加FCKeditor插件需要注意的地方