Web開發上有很多HTML的編輯控件，如CKEditor、kindeditor等等，很多都做的很好,本文主要介紹在MVC界面裡面，CKEditor的配置和使用。CKEditor的前身是FCKEditor，随着它的更新，上傳圖檔的功能被分離出去了，現在如果需要實作上傳圖檔，要麼自己寫代碼或者采用其他上傳控件（如Uploadify)，還有一種方法是使用CKFinder，這兩者的合并使用，能給我們帶來更多的友善。
CKEditor的使用比較簡單，一般情況下根據官方的指引選擇适當的樣式下載下傳就可以了，使用的時候，基本不需要怎麼樣修改配置檔案。在MVC的視圖頁面裡面，添加相關的引用檔案就可以了。
然後在界面添加需要編輯HTML内容的textarea控件，由于我的使用的是EasyUI的控件，是以設定了控件樣式class="easyui-validatebox"，也可以不管這裡。
我們一般使用的時候，需要一段javascript腳本進行初始化對應的控件，初始化代碼如下所示。
添加相應的腳本和控件初始化代碼後，就可以在界面中呈現出需要的效果了。
而之後的控件使用，就和普通的使用沒有兩樣了，如指派語句如下所示。
擷取控件的值，也和普通給的一樣
雖然CKFinder已經獨立出來，但是它也提供了完美的整合效果，我們把它下載下傳後，在壓縮包裡面的bin目錄裡面找到相應的 ckFinder.dll，把它添加我們項目工程的引用裡面去，我們才能正常使用檔案上傳功能。
然後修改config.ascx檔案裡面的一些設定，使得我們能夠順利使用。
第一步設定CheckAuthentication函數傳回True。
第二步是設定SetConfig函數裡面的BaseURL，這個基礎位址需要設定和我們項目的位址一緻，否則上傳檔案有問題。
第三步，整合CKFinder到CKEditor，前面說了CKEditor預設是沒有檔案上傳的功能操作的，需要添加CKFinder并進行配置才可以使用。
這步驟需要在CKEditor裡面的config.js檔案裡面修改下面的配置參數（紅色部分就可以了）。
通過以上代碼進行整合，在插入圖檔的操作頁面裡面，會增加一個浏覽伺服器按鈕，上傳操作頁籤等功能，友善對檔案的浏覽和上傳操作，具體效果如下所示。
以上就是我在我的Web架構裡面整合的HTML編輯控件和CKFinder檔案上傳元件，這兩個組合起來，能夠非常友善建構圖文并茂的文章内容。
這裡需要注意的是由于textarea中有特殊字元，出于安全原因，預設情況mvc架構不允許送出的，應在相應方法上加上[ValidateInput(false)]屬性。
如我為了送出HTML内容，需要在控制器對象裡面，重寫了内容的寫入和更新操作函數，如下所示。
如果對這個系列的其他内容總結有興趣，也可以看看下面的連接配接：
<a href="http://www.cnblogs.com/wuhuacong/p/3281103.html">基于MVC4+EasyUI的Web開發架構形成之旅--總體介紹</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3317223.html">基于MVC4+EasyUI的Web開發架構形成之旅--界面控件的使用</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3343967.html">基于MVC4+EasyUI的Web開發架構形成之旅--附件上傳元件uploadify的使用</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3344096.html">基于MVC4+EasyUI的Web開發架構形成之旅--架構總體界面介紹</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3352016.html">基于MVC4+EasyUI的Web開發架構形成之旅--基類控制器CRUD的操作</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3361351.html">基于MVC4+EasyUI的Web開發架構形成之旅--權限控制</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3667703.html">基于MVC4+EasyUI的Web開發架構經驗總結（1）-利用jQuery Tags Input 插件顯示選擇記錄</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3669575.html">基于MVC4+EasyUI的Web開發架構經驗總結（2）- 使用EasyUI的樹控件建構Web界面</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3669708.html">基于MVC4+EasyUI的Web開發架構經驗總結（3）- 使用Json實體類建構菜單資料</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3736564.html">基于MVC4+EasyUI的Web開發架構經驗總結（4）--使用圖表控件Highcharts</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3780356.html">基于MVC4+EasyUI的Web開發架構經驗總結（5）--使用HTML編輯控件CKEditor和CKFinder</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3840321.html">基于MVC4+EasyUI的Web開發架構經驗總結（6）--在頁面中應用下拉清單的處理</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3841338.html">基于MVC4+EasyUI的Web開發架構經驗總結（7）--實作省份、城市、行政區三者關聯</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3871991.html">基于MVC4+EasyUI的Web開發架構經驗總結（8）--實作Office文檔的預覽</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3872890.html">基于MVC4+EasyUI的Web開發架構經驗總結（9）--在Datagrid裡面實作外鍵字段的轉義操作</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3873498.html">基于MVC4+EasyUI的Web開發架構經驗總結（10）--在Web界面上實作資料的導入和導出</a>
<a href="http://www.cnblogs.com/wuhuacong/p/4073203.html">基于MVC4+EasyUI的Web開發架構經驗總結（11）--使用Bundles處理簡化頁面代碼</a>
<a href="http://www.cnblogs.com/wuhuacong/p/4085682.html">基于MVC4+EasyUI的Web開發架構經驗總結（12）--利用Jquery處理資料互動的幾種方式</a>
<a href="http://www.cnblogs.com/wuhuacong/p/4085725.html">基于MVC4+EasyUI的Web開發架構經驗總結（13）--DataGrid控件實作自動适應寬帶高度</a>
<a href="http://www.cnblogs.com/wuhuacong/p/4093778.html">基于MVC4+EasyUI的Web開發架構經驗總結（14）--自動生成圖示樣式檔案和圖示的選擇操作</a>