開源網頁編輯軟體FCKEditor在09年發布更新到3.0，並改名為CKEditor。改進後的ckeditor更加模組話，配置更加靈活，和以前的fckeditor使用方式上也有所不同。在我的mvc項目中由於要用到 ckeditor，特意研究了下它的使用方法，寫下來和大家分享。
我用的是最新版本的：ckeditor_3.0.1 ：http://ckeditor.com/
下載後直接解壓得到ckeditor檔案夾，包括如下內容：
其中sample為例子，source為源檔案，為了減少editor的體積，直接刪除。然後將整個檔案夾直接拷貝到網站的根目錄下.
在你需要使用editor控制項的頁面頭部添加：
<head>
...
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
</head>
在頁面相應位置上添加：<textarea name="editor1"></textarea><script type="text/javascript">
window.onload = function()
{
CKEDITOR.replace( 'editor1' );
};
</script>
注意：js代碼一定要寫在textarea後
其實可以這樣理解editor控制項只是對textarea做了一個漂亮的封裝，我們的輸入其實都在上面的texarea中，最終也是通過textarea
提交到伺服器端。
知道這些，伺服器端代碼就太簡單了：
[AcceptVerbs(HttpVerbs.Post)]
[ValidateInput(false)]
public ActionResult Create(FormCollection collection)
{
blog.Content = collection["editor1"];
。。。
}
collection["editor1"]即可取得editor中的輸入。這裡需要注意的是由於textarea中有特殊字元，出於
安全原因，預設情況mvc架構不允許提交的，應在相應方法上加上[ValidateInput(false)]屬性。效果如下：
還是相當不錯的。
新的editor中去除了上傳功能，也就是說我們不能通過上傳插入圖片、flash了。editor中的插入圖片對話方塊並沒有提供上傳功能：
幸好有個外掛程式ckfinder可以輔助我們完成以下功能，外掛程式的同樣在
http://ckeditor.com/ 最新版本：ckfinder_aspnet_1.4.1.1
解壓後，得到一個名為ckfinder的檔案夾，同樣刪除掉source、sample目錄（原因同上），拷貝到網站根目錄下。
注意：這裡還有些配置必須要做：
把檔案夾中的bin目錄下的dll檔案添加到網站的引用中，防止出現找不到類的錯誤。 開啟config.ascx，修改public override bool CheckAuthentication()
{
reture false；//改為return true；
}此處修改是為了有許可權上傳。
接下來就要把ckfinder整合到ckeditor中了，代碼如下：
var editor = CKEDITOR.replace('editor1');
CKFinder.SetupCKEditor(editor, '/ckfinder/');
當然，在頁面相應位置引用script代碼是必不可少的。
<script type="text/javascript" src="/ckfinder/ckfinder.js"></script>
好了，最後一步了，由於ckfinder不是免費的，所以預設情況下會在上傳頁面中有紅色的廣告提示，雖然不影響使用，但總是覺得
不爽。
去除方法如下：找到ckfinder/core/js/ckfinder_ie.js及ckfinder_gecko.js，將其中的en.call(window,qo); 代碼注釋或直接刪除。
至此我們的ckfinder全部配置完畢，運行效果如下：
補充：
要自己配置eidtor的外觀，可開啟eidtor檔案夾下的：config.js檔案進行配置。
CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
// config.width = 200;
};
此處配置是針對網站中所有頁面的editor，如單個頁面需要單獨配置，直接在頁面中寫配置代碼，樣本如下：
CKEDITOR.config.height = 400;
工作進展有點慢，但我沒偷懶。只是有些東西沒有接觸過，所以要慢慢摸索。總的來說，是缺乏經驗。
下午好像發現了jquery的一個不足之處，也不知道是不是我自己的原因。我在div裡面放了一個tableMain，然後在tableMain裡再嵌套了一個tableData。當我使用jquery的$(“#td_1”).className=”td_sel”時，發現$(“#td_1”)返回的是underfined。而使用document.getElementById(“td_1”) .className=”td_sel”，則一切正常。【註：此問題請關注4樓及5樓回複】
今天做到了文章發布這個模組，重點是設定編輯器。在網上搜尋了一下fckeditor，結果出來好多條資訊都說fckeditor已經升級為ckeditor，一時還不相信，以為是ckeditor在借fckeditor炒作，後來，當我看到“http://fckeditor.net/的網域名稱已經轉向http://ckeditor.com/”時，才相信這是真的。
下載了最新版的CKEditor 3.0.1，這是我的個人習慣，在條件允許的前提下，一切都要用最新版的。
按照http://ckeditor.com.cn/docs/的提示，在網頁上配置好了CKEditor，在瀏覽器中查看，感覺CKEditor的介面確實非常美觀，可當我興高采烈的想要嘗試一片上傳功能時，卻沒有看到上傳圖片的按鈕。
繼續在網上搜尋，結論是“CKEditor 本身不具備上傳功能，需要整合 CKFinder 才能實現上傳功能”。我最討厭帶外掛程式的東西了，但目前的情形下，我只能選擇忍。然後告訴自己：不就是整合一個外掛程式嗎？那就整合吧。
接著下載了CKFinder 1.4.1.1 for Asp.net，解壓後，將ckfinder檔案夾放到項目根目錄下——因為網上的很多資料都說，最好把CKEditor和CKFinder放在同一級目錄下。而這樣一來，我們的項目裡就會平白無故的多出兩個檔案夾來。我本人是有代碼潔癖的，我覺得，留一個檔案夾，以示對作者的尊重，這樣就足夠了。要留兩個，會讓我覺得很不舒服。
下載完之後就下班了，剩下的是回到家裡吃了晚飯之後做的。
在將CKFinder整合到CKEditor之前，我們還要對CKFinder進行一些配置。聰明的朋友應該很容易想到，既然是上傳檔案的外掛程式，要配置的東西多半是上傳檔案的路徑。
CKFinder預設的上傳路徑是在其本身目錄下的userfiles檔案夾，不過，我已經將CKFinder放到CKEditor檔案夾裡了，要是把圖片再存放到userfiles裡面，系統就得繞過三層檔案夾去找檔案或圖片了，於是，我打算將圖片上傳到項目根目錄下的upFile檔案夾裡。要實現這一功能，需要修改CKFinder下的config.ascx檔案，將BaseUrl = "/ckfinder/userfiles/"修改為BaseUrl = "~/upFile/"。然後，將CKFinder/bin檔案夾下的CKFinder.dll檔案剪下到系統項目的bin檔案夾裡。或者通過添加引用的方式，將CKFinder.dll引入到項目中。接下來，我們就可以使用帶有檔案上傳功能的CKEditor了：
把CKFinder檔案夾放到CKEditor檔案夾內，在頁面中，引入兩者的js檔案：
<script src="http://www.cnblogs.com/ckeditor/ckeditor.js" type="text/javascript"></script><script src="http://www.cnblogs.com/ckeditor/ckfinder/ckfinder.js" type="text/javascript"></script>
至於將編輯器引用到控制項上，網上有如下兩種方法：
一是使用用戶端控制項textarea：
<script type="text/javascript">
var editor = CKEDITOR.replace('txtContent');
CKFinder.SetupCKEditor(editor, 'http://www.cnblogs.com/ckeditor/ckfinder/');
</script>
二是使用伺服器端控制項textbox：
Code個人覺得，既然是asp.net的程式，那就用伺服器端的控制項吧。儘管運行效率比用戶端控制項要慢一點，但開發效率要快一些。而且，作為程式員，我們總是喜歡是嘗試所有的可能性，然後再選擇自己喜歡的那一種。
其實，這裡也可以不使用Text='<%# Bind("info") %>'來對控制項進行賦值，直接在後置代碼中使用
this.txtContent.Text=”初始值”也是可以的。取值的時候，也可以直接使用如下代碼：
CKFinder和CKEditor 的代碼。當我直接運行帶有編輯器的頁面時，編譯器提示如下錯誤：
string content= this.txtContent.Text注意：TextMode="MultiLine"屬性必不可少，否則取到的將是空值。
在偵錯工具之前，我沒有精簡
命名空間“System.Web.UI.Design”中不存在類型或命名空間名稱“ControlDesigner”(是缺少程式集引用嗎?)
出錯的地方在ckeditor\ckfinder\_source\FileBrowserDesigner.cs的第19行，於是，索性把檔案精簡一下：
第一步，精簡ckeditor ：將 _samples、_source 檔案夾刪除，lang 目錄下可以只保留en.js、zh.js、zh-cn.js 三個語言檔案；
第二步，精簡ckfinder：將 _samples、_source 檔案夾刪除，lang 目錄下可以只保留en.js、zh.js、zh-cn.js 三個語言檔案。
這裡請注意js代碼的第二行：CKFinder.SetupCKEditor(editor, 'http://www.cnblogs.com/ckeditor/ckfinder/');，這裡的“http://www.cnblogs.com/ckeditor/ckfinder/”是ckfinder與當前頁面的相對路徑，請大家不要直接複製粘貼代碼，否則在上傳圖片時，可能會出現如下錯誤：
說明: HTTP 404。您正在尋找的資源(或者它的一個依賴項)可能已被移除，或其名稱已更改，或暫時不可用。請檢查以下 URL 並確保其拼字正確。
請求的URL: /admin/ckeditor/ckfinder/core/connector/aspx/connector.aspx
所以，如果您不想同我一樣把ckfinder放到ckeditor檔案夾裡，那也沒關係，只要你在這裡把路徑修改填寫正確就可以了。
我以為這樣就算是做完了所有的工作了，但當我上傳圖片時，卻又彈出了如下的提示資訊：
因為安全原因,檔案不可瀏覽. 請聯絡系統管理員並檢查CKFinder設定檔。
沒辦法呀，俗話說，好事多磨。我又只能去請教最好的老師——百度了。複製上面的提示資訊到百度搜尋方塊，斷行符號後找到了一條關於PHP整合ckeditor的文章，對比了一下，抱著試一試的心態，居然把這樣問題解決了。方法是這樣的：
修改CKFinder下的config.ascx檔案，將public override bool CheckAuthentication()函數的傳回值由return false修改為return true。
再次測試，圖片上傳成功！
摘自 網路
相關補充：使用方法:
一.引用js指令碼
<script src="/Content/ckeditor_3.4/ckeditor.js" type="text/javascript"></script>
<script src="/Content/ckfinder_aspnet_2.0.1/ckfinder.js" type="text/javascript"></script>
二.調用ckeditor:使用class方法調用ckeditor
<%=html.textarea("content", new="" style="width:98%;height:300px;" class="ckeditor">
三.在ckeditor中整合ckfinder:在ckeditor的config中添加
//在 CKEditor 中整合 CKFinder，注意 ckfinder 的直接選取要正確。
var ckfinderPath = "/Content/ckfinder_aspnet_2.0.1";//ckfinder路徑
config.filebrowserBrowseUrl = ckfinderPath + '/ckfinder.html';
config.filebrowserImageBrowseUrl = ckfinderPath + '/ckfinder.html?type=Images';
config.filebrowserFlashBrowseUrl = ckfinderPath + '/ckfinder.html?type=Flash';
config.filebrowserUploadUrl = ckfinderPath + '/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files';
config.filebrowserImageUploadUrl = ckfinderPath + '/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images';
config.filebrowserFlashUploadUrl = ckfinderPath + '/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash';
四.取消ckfinder上傳檔案驗證
public override bool CheckAuthentication()
{
// WARNING : DO NOT simply return "true". By doing so, you are allowing
// "anyone" to upload and list the files in your server. You must implement
// some kind of session validation here. Even something very simple as...
//
// return ( Session[ "IsAuthorized" ] != null && (bool)Session[ "IsAuthorized" ] == true ); //自動化佈建的授權使用者確認，在授權使用者登入之後添加Session["IsAuthorized"]==true
//
// ... where Session[ "IsAuthorized" ] is set to "true" as soon as the
// user logs on your system.
//return false; 也可直接改為true,若有必要,自行添加驗證
return true;
}
為了安全性的考慮可以在這裡加入使用者驗證,根據使用者權限,確定是否有許可權上傳檔案.
解決方案很簡單就是在使用者登入時加入是否可上傳檔案的Session標誌。其實Fckeditor已經寫好了。直接把驗證函式CheckAuthentication()中的注釋段中
return ( Session[ "IsAuthorized" ] != null && (bool)Session[ "IsAuthorized" ] == true );
注釋去掉。在登入成功加入Session[“IsAuthorized”] = true;就可以了。
(非必要)五.修改上傳檔案名稱
修改ckfinder的原始碼，找到Connector\CommandHandlers\FileUploadCommandHandler.cs這個檔案，定位到:csharp 代碼
string sExtension = System.IO.Path.GetExtension( oFile.FileName );
sExtension = sExtension.TrimStart( '.' );
在下面加一行代碼:
sFileName = DateTime.Now.ToString("yyyyMMddHHmmssfff") + "." + sExtension;
文章來源：http://www.cnblogs.com/lushuicongsheng/archive/2011/05/09/2041695.html
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
