ASP.NET MVC 中使用Ckeditor4.5 編輯器

1、在項目中添加Ckeditor4.5.11

(1) 新建 ASP.NET MVC5項目，解壓縮ckeditor_4.5.11_standard.zip，在VS2015的解決方案資源管理器中將獲得的「ckeditor」文件夾複製到當前項目的Scripts文件夾中。

(2) 此時在解決方案資源管理器中「ckeditor」文件夾的內容不可見，選擇「顯示全部文件」後，將該文件夾中的全部內容選中，鼠標右鍵，選擇「包括在項目中」，便可看到並使用該文件夾的相應內容。

 

2、在視圖文件中使用Ckeditor編輯器

(1) 在須要使用Ckeditor編輯器的視圖中添加編輯器ckeditor.js和配置文件config.js的引用

<script src="~/Scripts/ckeditor/ckeditor.js"></script>

<script src="~/Scripts/ckeditor/config.js"></script>

(2) 方法一：

將內容行

@Html.EditorFor(model => model.PostContent, new { htmlAttributes = new { @class = "form-control" } })

更改成：@Html.TextAreaFor(model => model.PostContent, new { @class = "ckeditor" })

(3) 運行後效果以下圖所示

 

(4) 方法二：在第(1)步的基礎上，在當前視圖的最後添加如下內容（這種方式有可能會使得編輯器提交的值爲空值）：

<script type="text/javascript">

    CKEDITOR.replace('PostContent');

</script>

說明：CKEDITOR.replace('PostContent') 單引號中的內容爲文本框的id值。

 

3、添加編輯器的本地圖片上傳功能

(1) 單擊編輯器的「圖片」按鈕，此時圖像屬性中沒有「上傳」功能。

 

(2) 在項目的解決方案資源管理器中雙擊/Scripts/ckeditor/config.js ，打開Ckeditor配置文件，添加行： config.filebrowserImageUploadUrl = "/Home/Upload";

說明：等號右邊爲實現圖片上傳功能的 控制器名/方法(動做)名，實際開發時可使用專門的上傳控制器來處理圖片上傳功能，例如："/Upload/Image"

(3) 若是要指定語言爲簡體中文則添加如下行：config.language = 'zh-cn';

(4) 刷新頁面後再次點擊圖片按鈕，已經顯示「上傳」選項卡（在Ckeditor的配置文件中添加config.filebrowserImageUploadUrl後，圖像屬性就能夠看到「上傳」選項卡），效果以下圖所示：

 

 

4、實現圖片上傳功能

(1) 第三步中雖然已經顯示「上傳」選項卡，但沒有用於支持圖片上傳功能的代碼，因爲已經在上面的步驟中指定"/Home/Upload"負責處理圖片上傳，因此在Home控制器添加Upload方法（動做），代碼以下所示：

 

        [HttpPost]

        public ActionResult Upload(HttpPostedFileBase upload)

        {

            //獲取圖片文件名

            var fileName = System.IO.Path.GetFileName(upload.FileName);

            var filePhysicalPath = Server.MapPath("~/upload/" + fileName);//我把它保存在網站根目錄的 upload 文件夾，須要在項目中添加對應的文件夾

 

            upload.SaveAs(filePhysicalPath);  //上傳圖片到指定文件夾

 

            var url = "/upload/" + fileName;

            var CKEditorFuncNum = System.Web.HttpContext.Current.Request["CKEditorFuncNum"];

 

            //上傳成功後，咱們還須要經過如下的一個腳本把圖片返回到第一個tab選項

            return Content("<script>window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum + ", \"" + url + "\");</script>");

        }

 

(2) 由於編輯器產生的內容中包含中HTML標籤代碼，提交時會致使頁面驗證失效，運行時有相似「...從客戶端中檢測到有潛在危險的 request.form 值。」的錯誤提示，這時能夠經過爲發表文章的方法（動做）添加特性（Attributes）：[ValidateInput(false)]來解決這個問題。

 

(3) 顯示帶有HTML標籤的內容：@Html.Raw(item.PostContent)