【www.bbyears.com--.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. 在 asp教程x 页面或者 master 模板页
<script type="text/网页特效" src="ckeditor/ckeditor.js"></script>
2. 修改页面的page指令ValidateRequest="false"
<%@ Page Language="C#" ValidateRequest="false" %>
3. 在标签中使用ckeditor：
Text="<%# Bind("info") %>" runat="server">
4. 获取或设置编辑器中的内容
//获取编辑器中的内容
lblView.Text=Server.HtmlEncode( this.txtContent.Text);
//设置编辑器中的内容
//txtContent.Text = Server.HtmlDecode("
设置内容
");CKFinder 的使用
准备工作
1. 下载CKFinder的Asp.NET版，将其解压到Web根目录下
2. 复制/bin/Release目录下的ckfinder.dll文件至站点bin目录
3. 精简目录：
_samples文件夹（示例文件，可以删除）
_source文件夹（源程序文件，可以删除）
CKFinder的配置
1. 打开 " ckfinderconfig.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：
1.解压CKEditor到webRoot目录，在应用页面加载其ckeditor.js ;
2.页面textarea：
CKFinder：
3.解压CKFinder到webRoot目录（最好与CKEditor同级），在应用页面加载其ckfinder.js ;
4.页面script：（最好textarea之后）
if (typeof CKEDITOR == ‘undefined’) {
document.write(’加载CKEditor失败’);
}
else {
var editor = CKEDITOR.replace(’editor1′);
CKFinder.SetupCKEditor(editor, ‘../ckeditor/ckfinder/’); //ckfinder总目录的相对路径.
}
整合：
（把俩js加载到同一文件其实就已经基本整合好了，还需要修改的配置如下）
5.打开ckfinderconfig.php教程，修改$baseUrl = ‘（上传附件的存放路径）’; //以webRoot为起始的绝对路径，其目录下会自动生成images、flash等子目录；默认是在webRoot的根目录下，注意修改。
至此配置完毕，如果需要自定义界面，可进行以下的高级修改：
6.在ckeditorconfig.js中的CKEDITOR.editorConfig里加入以下需要自定义的配置代码：
//字体.
config.font_names = "宋体;楷体_GB2312;新宋体;黑体;隶书;幼圆;微软雅黑;Arial; Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana;";
//工具按钮.
config.toolbar=
[
["Source","-","Save","NewPage","Preview","-","Templates"],
["Cut","Copy","Paste","PasteText","PasteFromWord","-","Print","SpellChecker","Scayt"],
["Undo","Redo","-","Find","Replace","-","SelectAll","RemoveFormat"],
["Form","Checkbox","Radio","TextField","Textarea","Select","Button",
"ImageButton","HiddenField"],
"/",
["Bold","Italic","Underline","Strike","-","Subscript","Superscript"],
["NumberedList","BulletedList","-","Outdent","Indent","Blockquote"],
["JustifyLeft","JustifyCenter","JustifyRight","JustifyBlock"],
["Link","Unlink","Anchor"],
["Image","Flash","Table","HorizontalRule","Smiley","SpecialChar",
"PageBreak"],www.111cn.net
"/",
["Styles","Format","Font","FontSize"],
["TextColor","BGColor"],
["Maximize","ShowBlocks","-","About"]
];
//宽度
config.width = 500;
//高度
config.height = 400;
//皮肤
config.skin="v2";
安装CKFinder后才能有上传功能:
第二步：设置CKFinder的上传功能
由于本次CKEditor全新改版，没有提供文件上传功能，所以选择整合CKFinder是个不错的选择
需要修改一下CKEditor插件文件夹下的JS源码，以image插件为例（Flash及Files同理）：
Code
//将下边的代码做一些修改
//{type:"button",id:"browse",align:"center",label:m.lang.common.browseServer,hidden:false,filebrowser:"info:txtUrl"}]}]},
//2009-07-13 将浏览服务器按钮置为显示状态 （hidden: false）,增加onClick函数，用于打开ckfinder页面,紧接着上面的代码添加
{ type: "button", id: "browse", align: "center", label: m.lang.common.browseServer, hidden: false, filebrowser: "info:txtUrl", onClick: function() { var finder = new CKFinder(); finder.BasePath = "../ckfinder20090716/"; finder.SelectFunction = SetFileField; finder.Popup(); } }]}]},
在方法体外增加下边的函数
//用于取回 ckfinder 返回的图片地址并对路径文本框和预览图片进行赋值
function SetFileField(fileUrl)
{
//获取主Div下的所有文本框控件
var inputStr = document.getElementById("cke_txtContent_dialog").getElementsByTagName("Input");
for(var i=0; i
if(inputStr[i].type=="text")
{
//第一个输入框控件是图像路径，得到ID，设置新的图片路径
CKEDITOR.document.getById(inputStr[i].id).setValue(fileUrl);
break ;
}
}
CKEDITOR.document.getById("previewImage").setAttribute("src", decodeURI(fileUrl));
}
第三步：CKFINDER上传问题：出现“因为安全原因，文件不可浏览. 请联系系统管理员并检查CKFinder配置文件“
整合后会出现“因为安全原因，文件不可浏览. 请联系系统管理员并检查CKFinder配置文件“
The Solution:
1. There is no write access for the default upload folder $baseUrl = "/userfiles/"; in ckfinder/config.php.
对于目标文件夹$baseUrl = "/userfiles/";没有写入权限
2. This is maybe because the Return value of Funcation CheckAuthentication() is always FALSE by default in ckfinder/config.php. Change the Validation Condition according to your condition, not recommend to set the return value to true directly.
因为出于安全考虑ckfinder/config.php文件中的CheckAuthentication()函数默认返回值是false, 需要手动修改验证条件, 不建议直接返回true