前言
由於專案需求常常要用到圖文編輯器，所以研究了一下 CKEditor 如何搭配 ASP.NET MVC上使用，
因此今天要介紹如何在 ASP.NET MVC 中使用 CKEditor。
下載
先去官網下載 ckeditor 。
操作步驟
Step1:
先將下載的 CKEditor 檔案放置 Scripts 資料夾內。
Step2:
先建立一個 Textarea 並指定 ID，待會才能使用 CKEditor 取代這個 Html Element。1
2
3
4
5
6
7<div class="form-group">
@Html.LabelFor(model => model.Content, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.TextArea("Content", new { @class = "ckeditor" })
@Html.ValidationMessageFor(model => model.Content)
</div>
</div>
Step3:
在頁面引用 ckeditor 的 js ，並指定要取代的 Html Element，這樣就成功在 Html 渲染出
一個圖文編輯器了。1
2
3
4
5
6
7@section Scripts {
<script src="@Url.Content("~/Scripts/ckeditor/ckeditor.js")" type="text/javascript"></script>
@*加入圖片上傳頁籤，放在頁面底下，放在頁面head區的話，會抓不到myText DOM*@
<script type="text/javascript">
CKEDITOR.replace('Content', { filebrowserImageUploadUrl: '/Upload/UploadPicture' });
</script>
}
Step4:
在後端接 CKEditor 值的時候，要注意以下的部分:
- 在 Controller 中所對應的 Action 方法上，記得要設定 ValidateInput(false)，否則接到 ckeditor的值的
時候會有錯誤。 - 由於設定了 ValidateInput(false) ，會遭受到 XSS 攻擊或是輸入內容有不善或惡意的指令，因此我們必須
要做一些防護措施。我是使用了 HtmlSanitizer，幫我在進資料庫之前，把一些特殊的字元進行過濾掉。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16[]
[]
[]
public ActionResult Create([Bind(Include="Title,Content")] About about)
{
if (ModelState.IsValid)
{
var sanitizer = new HtmlSanitizer();
about.Content = sanitizer.Sanitize(about.Content);
db.About.Add(about);
db.SaveChanges();
return RedirectToAction("Index");
}
return View(about);
}