2012年3月30日 天气有小雨 有时候一点小错误,导致你浪费半天的时间。太粗心了,因为自己的一点小失误,导致了配置一下午。工科不能马虎。
一、下载文件
CKEditor文本操作控件
CKFinder上传控件
版本可以不一样,但配置都是一样的
1、在项目中添加对应的文件
右击网站,添加引用。依次添加两个文件夹中“\bin\Debug” 中的dll文件——CKEditor.NET.dll、CKFinder.dll
2、将文件夹“ckeditor”、“ckfinder”添加到网站的根目录下
注意,下载的文件中包括很多用不到的文件,可以稍微清理一下:
此版本对于CKEditor只需要“\_Samples”文件夹下的“ckeditor”文件夹即可,其余都可不要。
_source文件夹(源程序文件,可以删除)
changes.html(更新列表,可以删除)
install.html(安装指向,可以删除)
license.html(使用许可,可以删除)
3、修改配置文件
(1)CKEditor配置:打开“ckeditor\config.js”文件,根据需要添加配置信息
CKEDITOR.editorConfig = function(config) {
config.skin = 'v2'; //选择皮肤,源文件在“ckeditor\skins\”中
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'],
['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote', 'ShowBlocks'], '/',
['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript'],
['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'], ['Link', 'Unlink', 'Anchor'],
['Image', 'Flash', 'Table', 'HorizontalRule', 'SpecialChar'], '/',
['Styles', 'Format', 'Font', 'FontSize'], ['TextColor', 'BGColor'], ['Maximize', '-', 'About']
];
}
(2)在CKEditor中集成CKFinder,注意对应文件的路径
将下面的内容继续添加到“ckeditor\config.js”文件中
CKEDITOR.editorConfig = function(config) {//……//前面的不覆盖他config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html'; //不要写成"~/ckfinder/..."或者"/ckfinder/..." config.filebrowserImageBrowseUrl = 'ckfinder/ckfinder.html?Type=Images'; config.filebrowserFlashBrowseUrl = 'ckfinder/ckfinder.html?Type=Flash'; config.filebrowserUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files'; config.filebrowserImageUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images'; config.filebrowserFlashUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash'; config.filebrowserWindowWidth = '800'; //“浏览服务器”弹出框的size设置 config.filebrowserWindowHeight = '500'; };
(3)CKFinder的配置:
打开“ckfinder\”下的用户控件config.ascx,更改其BaseUrl路径:
BaseUrl = "~/ckfinder/userfiles/";//or BaseUrl = "ckfinder/userfiles/";
并且更改:
public override boolCheckAuthentication() {
//return false;
return true; //此处直接设置为true有一些危险,正式使用时要适当加入自己的判断逻辑
}
(4)页面调用
protected void Page_Load(object sender, EventArgs e)
{
CKFinder.FileBrowser _FileBrowser = new CKFinder.FileBrowser();
_FileBrowser.BasePath = "../ckfinder/";//此路径根据你的页面文件路径而改变,如果你的当前页面在根上,“ckfinder/”
_FileBrowser.SetupCKEditor(CKEditorControl1);//启动你的editor控件
}
页面调用 因为引用时 每次还要加一段服务器代码,很麻烦,建议用这种
在ckeditor(是ckeditor)的config.js文件中加入几段代码, 如:
CKEDITOR.editorConfig = function(config) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
//以下是需要加入的
config.filebrowserBrowseUrl = '/ckfinder/ckfinder.html';
config.filebrowserImageBrowseUrl = '/ckfinder/ckfinder.html?Type=Images';
config.filebrowserFlashBrowseUrl = '/ckfinder/ckfinder.html?Type=Flash';
config.filebrowserUploadUrl = '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files';
config.filebrowserImageUploadUrl = '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images';
config.filebrowserFlashUploadUrl = '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash';
//加入后会发现ckeditor框中多了"上传"
};