CKEditor HTML 網頁編輯器 + ASP.NET MVC3 範例

CKEditor 是一款「所見即所得」(WYSIWYG)的 HTML 網頁編輯器,免費、功能強大且支援 ASP.NET。下載後經過簡單安裝便能作為前台或後台編輯工具。

CKEditor

官方網站下載

以下範例會從後台安裝到前台顯示完整實作。

#1 安裝至 ASP.NET MVC 3,建立一個 ASP.NET MVC3 新專案,命名為 CKEditor。

CKEditor

#2 選擇網際網路應用程式、檢視引擎 Razor、使用 HTML5 語意標記。

CKEditor

#3 下載 CKEditor 檔案,解壓縮後,整個資料夾直接貼到 CKEditor 地球上,即產生資料夾 ckeditor。

CKEditor

#4 為了在每一頁都可以使用,在 Layout.cshtml 中 include ckeditor.js 加入程式碼。

<script src="../../ckeditor/ckeditor.js" type="text/javascript"></script>

完整 Layout.cshtml 檔案,請見這裡

#5 到 Views/Home/About.cshtml 加入一行程式碼。

@Html.TextArea("editor", new {@class = "ckeditor", @id = "aboutme"})

<textarea id="aboutme" class="ckeditor"></textarea>

CKEditor

用瀏覽器檢視會看到以下 code(會隱藏起來)。

<textarea rows="2" name="editor" id="aboutme" cols="20" class="ckeditor" style="visibility: hidden; display: none;"></textarea>

並在下方放一個 save button,作為後台編輯完後的儲存按鈕,準備將編輯好的檔案傳回 controller。最後撰寫 javascript。完整 About.cshtml 檔案,請見這裡

#6 把專案 Run 起來後,即可看到編輯器。打些文字和放張圖片。

CKEditor

#7 在 controller(預設是 HomeController.cs)增加兩個 function 來接收儲存結果與顯示於前台畫面。

CKEditor

新增儲存的 function,程式碼可見這裡

CKEditor

新增顯示於前台畫面的 function,程式碼可見這裡

CKEditor

#8 在前台即會顯示以下的畫面。

CKEditor

Note


這篇文章的原始位置在這裡-CKEditor HTML 網頁編輯器 + ASP.NET MVC3 範例

由於部落格搬遷至此,因此在這裡放了一份,以便閱讀;部份文章片段也做了些許修改,以期提供更好的內容。
標籤: ASP.NET MVC
comments powered by Disqus