一、官方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']
];
}
（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的路徑對應實際放置的位置
（3）CKFinder的配置：
開啟“ckfinder\”下的使用者控制項config.ascx，更改其BaseUrl路徑：
BaseUrl = "~/ckfinder/userfiles/";//or BaseUrl = "ckfinder/userfiles/";
並且更改：
public override boolCheckAuthentication() {
//return false;
return true; //此處直接設定為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>
2、然後，在<body>中需要放置該控制項的位置加入如下代碼，分別有以下幾種使用方法：
（1）給控制項添加指定的class屬性
<textarea id="textarea1" name="editor1" class="ckeditor">hello!</textarea>
伺服器控制項：
<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>
伺服器控制項：
<asp:TextBox ID="mckeditor" runat="server" TextMode="MultiLine"></asp:TextBox> <script type="text/javascript"> CKEDITOR.replace('<%=mckeditor.ClientID %>'); </script>
使用過程中難免想要對其進行一些改造，可以參考： ckeditor與ckfinder的中國本地化改造
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
