首先：先下載CKeditor

引用：<script type="text/javascript" src="/Scripts/ckeditor/ckeditor.js"></script>

//前臺程式碼

<table>

 <tr>
            <td style="width: 100px; text-align: right;">內容：</td>
            <td colspan="3" width="800" height="200">
                <textarea id="txt_MsgContent" name="MsgContent" style="width: 270px; height: 100px; " maxlength="2000"></textarea>
                    <label id="lbl_MsgContent"></label>
            </td>
            <td><input id="txt_Content" type="text" style="display:none" /></td>
        </tr>

</table>

<script type="text/javascript">

//將textarea替換成編輯器

var MyCKenitor = CKEDITOR.replace('txt_MsgContent', {language : 'zh-cn',uiColor: '#eeeeee', toolbar: [
        { name: 'basicstyles', groups: ['basicstyles', 'cleanup'], items: ['Bold', 'Italic', 'Underline', 'Strike', 'RemoveFormat'] },
        { name: 'paragraph', groups: ['list', 'indent', 'blocks', 'align', 'bidi'], items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'] },
        { name: 'insert', items: ['Image','HorizontalRule', 'SpecialChar'] },
        { name: 'colors', group: ['colorbutton', 'colordialog'], items: ['TextColor', 'BGColor'] },
        { name: 'forms' },
        '/',
        { name: 'styles', items: ['Styles', 'Format', 'Font', 'FontSize'] },
        { name: 'others' }
        ]
    });//自定義配置編輯器, 'Link', 'Unlink'
    //是否在選擇顏色時顯示“其它顏色”選項
    CKEDITOR.config.colorButton_enableMore = false;
    CKEDITOR.config.image_previewText = ' '; //預覽區域顯示內容
    CKEDITOR.config.filebrowserImageUploadUrl = "後臺方法地址/upload";//設定檔案上傳檔案/圖片地址,

</script>

//後臺程式碼

#region 上傳檔案/圖片Upload()
        /// <summary>
        /// 上傳檔案/圖片
        /// </summary>
        /// <param name="upload"></param>
        /// <returns></returns>
        public ActionResult Upload(HttpPostedFileBase upload)
        {
            var fileName = System.IO.Path.GetFileName(upload.FileName);
            //if (upload.ContentLength > 1024 * 1024 * 1)
            //{
            //   return null;
            //   return  Content("<script>alert('圖片大小不符合，大小不超過1M！');</script>"); //<script></script>alert('圖片大小不符合，大小不超過1M！')     
            //}
            //var filePhysicalPath = Server.MapPath("/ImgFile/" + fileName);//我把它儲存在網站根目錄的 ImgFile 資料夾
            string filePath = ConfigurationManager.AppSettings["ImgFile"];
            var filePhysicalPath = Server.MapPath(filePath + fileName);

            upload.SaveAs(filePhysicalPath);
            //var url = ConfigurationManager.AppSettings["MessageFilePath"] + "/PMSFile/" + fileName;
            var url = ConfigurationManager.AppSettings["ImgFile"] + fileName;
            var CKEditorFuncNum = System.Web.HttpContext.Current.Request["CKEditorFuncNum"];

            //上傳成功後，我們還需要通過以下的一個指令碼把圖片返回到第一個tab選項
            return Content("<script>window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum + ", \"" + url + "\");</script>");
        }
        #endregion

//遇到的一些問題

1.儲存訊息時：（前臺傳到後臺會轉義 ）

前臺傳後臺： var MsgContent = CKEDITOR.tools.htmlEncode(MyCKenitor.getData());//對CKeditor編輯器取出的資料進行二次解析

後臺存資料庫：Server.HtmlDecode(MsgContent);

2.前臺獲取後臺資料顯示在頁面時：

後臺傳前臺：document.getElementById('txt_MsgContent').innerHTML = CKEDITOR.tools.htmlDecode(後臺傳的資料);