ckeditor编辑器+finder配置上传功能

一、官方Download

1、CKEditor ：点击CKEditor.NET标题下的“Download zip”按钮

此处使用当前最新版本“CKEditor.NET 3.5.2, released on 7 March 2011”

2、CKFinder ：点击Asp.net标签下的“Download zip”或者“Download tar.gz”按钮（PS:两个按钮下载的内容一样，说明）

此处使用当前最新版本“version: 2.0.2, updated 03.03.2011”

——CKEditor是新一代的FCKEditor，很明显的不同点是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']
    ];
}

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';
}
CKFinder.SetupCKEditor(null, '../ckfinder/');//注意ckfinder的路径对应实际放置的位置

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';
}
CKFinder.SetupCKEditor(null, '../ckfinder/');//注意ckfinder的路径对应实际放置的位置

（3）CKFinder的配置：

打开“ckfinder\”下的用户控件config.ascx，更改其BaseUrl路径：

BaseUrl = "~/ckfinder/userfiles/";//or BaseUrl = "ckfinder/userfiles/";

BaseUrl = "~/ckfinder/userfiles/";//or BaseUrl = "ckfinder/userfiles/";

并且更改：

public override boolCheckAuthentication()  {
            //return false;
           return true;
}

public override boolCheckAuthentication()  {
	        //return false;
	       return true; 
}

至此，配置工作终于完成啦。。

三、在页面应用CKEditor控件

1、在页面的<head>中添加对应的js引用：

<script type="text/javascript" language="javascript" src="ckfinder/ckfinder.js"></script>
<script type="text/javascript" language="javascript" src="ckeditor/ckeditor.js"></script>

<script type="text/javascript" language="javascript" src="ckfinder/ckfinder.js"></script>
<script type="text/javascript" language="javascript" src="ckeditor/ckeditor.js"></script>

2、然后，在<body>中需要放置该控件的位置加入如下代码，分别有以下几种使用方法：

（1）给控件添加指定的class属性

<textarea id="textarea1" name="editor1" class="ckeditor">hello!</textarea>

<textarea id="textarea1" name="editor1" class="ckeditor">hello!</textarea>

服务器控件：

<asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" CssClass="ckeditor"></asp:TextBox>

<asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" CssClass="ckeditor"></asp:TextBox>

（2）注入js代码——此处js代码最好写在控件之后，也可以写在<head>中

<textarea id="textarea1" name="editor1">hello!</textarea>
<script type="text/javascript">
        CKEDITOR.replace('editor1', { height:400, width:800 });
</script>

<textarea id="textarea1" name="editor1">hello!</textarea>
<script type="text/javascript">
        CKEDITOR.replace('editor1', { height:400, width:800 });
</script>

服务器控件：

<asp:TextBox ID="mckeditor" runat="server" TextMode="MultiLine"></asp:TextBox>
<script type="text/javascript">
        CKEDITOR.replace('<%=mckeditor.ClientID %>');
</script>

转自：http://www.ok22.org/art_detail.aspx?id=134