TinyMCE HTML 編輯器
第一個 HTML 編輯器，我們介紹
TinyMCE HTML 編輯器。
Step 1. 開一個全新 ASP.NET MVC 3 專案
檔案 → 新增專案 → Visual Basic → Web → ASP.NET MVC 3 Web 應用程式 → 名稱：「
Mvc3HTMLEditorAndDatePicker」→ 網際網路應用程式 → 檢視引擎：「ASPX」。
未來六個範例，都會在此專案內增加進來。
Step 2. 準備一個 Model：BlogPostTinyMCE.vb
''' <summary>
''' Blog 發佈文章類別
''' </summary>
Public Class BlogPostTinyMCE
' 標題
Public Property Title() As String
' 發佈日期
Public Property PostedOn() As DateTime
' 標籤
Public Property Tags() As String
' 內容
Public Property Content() As String
End Class
以上內容很簡單，未來幾個範例，也會使用以上架構 Model 架構來進行。
Step 3. 建立一個 Controller：
BlogPostTinyMCEController.vb
在「加入控制器」裡的「Scaffold 選項」→ 「範本」→ 選擇「空白控制器」。然後寫一個 Create() 的 Action 方法。
Namespace Mvc3HTMLEditorAndDatePicker
Public Class BlogPostTinyMCEController
Inherits System.Web.Mvc.Controller
'
' GET: /BlogPostTinyMCE/Create
Function Create() As ActionResult
Return View()
End Function
<HttpPost(), ActionName("Create")>
Function Create_Post(model As BlogPostTinyMCE) As ActionResult
Return View(model)
End Function
End Class
End Namespace
重點在第二個 <HttpPost(), ActionName("Create")> 方法中，
參數要接收 BlogPostTinyMCE類別。然後新增我們 Create 的 View。
Step 4. 新增 Create Action 的 View
先建置專案 → Create → 加入檢視 → 勾選「建立強型別檢視」 → 選擇「 BlogPostTinyMCE」 → Scaffold 樣板：「Create」→ 完成。
完成後，我們簡單修改此 View。
<%@ Page Title="" Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage(Of Mvc3HTMLEditorAndDatePicker.BlogPostTinyMCE)" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
KKBruce : TinyMCE HTML編輯器
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2>TinyMCE HTML編輯器</h2>
<%-- The following line works around an ASP.NET compiler warning --%>
<%: "" %>
<script src="<%: Url.Content("~/Scripts/jquery.validate.min.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js") %>" type="text/javascript"></script>
<% Using Html.BeginForm() %>
<%: Html.ValidationSummary(True) %>
<fieldset>
<legend>TinyMCE HTML編輯器</legend>
<div class="editor-label">
<%: Html.LabelFor(Function(model) model.Title) %>
</div>
<div class="editor-field">
<%: Html.EditorFor(Function(model) model.Title) %>
<%: Html.ValidationMessageFor(Function(model) model.Title) %>
</div>
<div class="editor-label">
<%: Html.LabelFor(Function(model) model.PostedOn) %>
</div>
<div class="editor-field">
<%: Html.EditorFor(Function(model) model.PostedOn) %>
<%: Html.ValidationMessageFor(Function(model) model.PostedOn) %>
</div>
<div class="editor-label">
<%: Html.LabelFor(Function(model) model.Tags) %>
</div>
<div class="editor-field">
<%: Html.EditorFor(Function(model) model.Tags) %>
<%: Html.ValidationMessageFor(Function(model) model.Tags) %>
</div>
<div class="editor-label">
<%: Html.LabelFor(Function(model) model.Content) %>
</div>
<div class="editor-field">
<%: Html.EditorFor(Function(model) model.Content) %>
<%: Html.ValidationMessageFor(Function(model) model.Content) %>
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
<% End Using %>
<p>
發表內容(顯示HTML標籤)：<%: ViewBag.HtmlContent %>
</p>
<p>
發表內容(顯示HTML效果)：<%= Html.Raw(ViewBag.HtmlContent) %>
</p>
<div>
<%: Html.ActionLink("回首頁", "Index","Home") %>
</div>
</asp:Content>
我們希望把含編輯後含HTML與實際HTML效果顯示出來，所以我們再最後加上幾行程式。我們把專案按「Ctrl + F5」執行起來，然後輸入「http://localhost:6944/
BlogPostTinyMCE/Create」(記得改成你的 Port)的 Controller / Action。
 |
| 圖一：預設表單(點擊看大圖) |
我們可以輸入資料，但都是純文字。
 |
| 圖二：文字輸入 |
到目前為止，與一般表單沒有什麼不同。現在讓我們為此表單的 Content 加上 TinyMCE HTML編輯器吧。
