Web開發上有很多HTML的編輯控制元件，如CKEditor、kindeditor等等，很多都做的很好,本文主要介紹在MVC介面裡面，CKEditor的配置和使用。CKEditor的前身是FCKEditor，隨著它的更新，上傳圖片的功能被分離出去了，現在如果需要實現上傳圖片，要麼自己寫程式碼或者採用其他上傳控制元件（如Uploadify)，還有一種方法是使用CKFinder，這兩者的合併使用，能給我們帶來更多的方便。

1、CKEditor的使用

CKEditor的使用比較簡單，一般情況下根據官方的指引選擇適當的樣式下載就可以了，使用的時候，基本不需要怎麼樣修改配置檔案。在MVC的檢視頁面裡面，新增相關的引用檔案就可以了。

    @*新增對ckeditor的支援*@
    <script src="~/Content/JQueryTools/ckeditor/ckeditor.js"></script>
    <script src="~/Content/JQueryTools/ckeditor/adapters/jquery.js"></script>

然後在介面新增需要編輯HTML內容的textarea控制元件，由於我的使用的是EasyUI的控制元件，因此設定了控制元件樣式class="easyui-validatebox"，也可以不管這裡。

                   <
 
tr>
                        <th>
                            <label for="Content">內容：</label>
                        </th>
                        <td>
                            <textarea class="easyui-validatebox" id="Content" name="Content" style="width:1024px"
 
></textarea>
                        </td>
                    </tr>

我們一般使用的時候，需要一段javascript指令碼進行初始化對應的控制元件，初始化程式碼如下所示。

    <script>
        function initEditor() {
            $('#Content').ckeditor();//控制元件1
            $('#Content1').ckeditor();//控制元件2
        }
    </script>

新增相應的指令碼和控制元件初始化程式碼後，就可以在介面中呈現出需要的效果了。

而之後的控制元件使用，就和普通的使用沒有兩樣了，如賦值語句如下所示。

$('#Content1').val(info.Content);//ckeditor賦值

獲取控制元件的值，也和普通給的一樣

var content = $("#Content1").val();

2、CKFinder的整合使用

雖然CKFinder已經獨立出來，但是它也提供了完美的整合效果，我們把它下載後，在壓縮包裡面的bin目錄裡面找到相應的 ckFinder.dll，把它新增我們專案工程的引用裡面去，我們才能正常使用檔案上傳功能。

然後修改config.ascx檔案裡面的一些設定，使得我們能夠順利使用。

第一步設定CheckAuthentication函式返回True。

    public override bool CheckAuthentication()
    {
                return true;
    }

第二步是設定SetConfig函式裡面的BaseURL，這個基礎地址需要設定和我們專案的地址一致，否則上傳檔案有問題。

    public override void SetConfig()
    {
        // The base URL used to reach files in CKFinder through the browser.
        BaseUrl = "/Content/JQueryTools/ckfinder/userfiles/";

         ........................

第三步，整合CKFinder到CKEditor，前面說了CKEditor預設是沒有檔案上傳的功能操作的，需要新增CKFinder並進行配置才可以使用。

這步驟需要在CKEditor裡面的config.js檔案裡面修改下面的配置引數（紅色部分就可以了）。

CKEDITOR.editorConfig = function( config ) {
    // Define changes to default configuration here.
    // For complete reference see:
    // http://docs.ckeditor.com/#!/api/CKEDITOR.config

.......................

    config.filebrowserBrowseUrl = '/Content/JQueryTools/ckfinder/ckfinder.html'; //上傳檔案時瀏覽服務資料夾
    config.filebrowserImageBrowseUrl = '/Content/JQueryTools/ckfinder/ckfinder.html?Type=Images'; //上傳圖片時瀏覽服務資料夾
    config.filebrowserFlashBrowseUrl = '/Content/JQueryTools/ckfinder/ckfinder.html?Type=Flash';  //上傳Flash時瀏覽服務資料夾
    config.filebrowserUploadUrl = '/Content/JQueryTools/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files'; //上傳檔案按鈕(標籤) 
    config.filebrowserImageUploadUrl = '/Content/JQueryTools/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images'; //上傳圖片按鈕(標籤) 
    config.filebrowserFlashUploadUrl = '/Content/JQueryTools/ckfinder/connector/aspx/connector.aspx?command=QuickUpload&type=Flash'; //上傳Flash按鈕(標籤)
};

3、整合效果展示

通過以上程式碼進行整合，在插入圖片的操作頁面裡面，會增加一個瀏覽伺服器按鈕，上傳操作選項卡等功能，方便對檔案的瀏覽和上傳操作，具體效果如下所示。

以上就是我在我的Web框架裡面整合的HTML編輯控制元件和CKFinder檔案上傳元件，這兩個組合起來，能夠非常方便構建圖文並茂的文章內容。

4、MVC的處理

這裡需要注意的是由於textarea中有特殊字元，出於安全原因，預設情況mvc框架不允許提交的，應在相應方法上加上[ValidateInput(false)]屬性。

如我為了提交HTML內容，需要在控制器物件裡面，重寫了內容的寫入和更新操作函式，如下所示。

        [ValidateInput(false)]
        public override ActionResult Insert(InformationInfo info)
        {
            info.Editor = CurrentUser.Name;
            info.EditTime = DateTime.Now;

            return base.Insert(info);
        }

        [ValidateInput(false)]
        public override ActionResult Update(string id, FormCollection formValues)
        {
            return base.Update(id, formValues);
        }

如果對這個系列的其他內容總結有興趣，也可以看看下面的連線：

基於MVC4+EasyUI的Web開發框架的系列文章：