Here is the script. I want to use CKEditor for a rich text field in a form, but for some reason I cannot get the contents from the text field to the server and return to the page without coding problems. Here is a small program that I wrote to try to figure out what is going on. First, my view model:
HomeViewModel.cs
namespace CkEditorTest.Models { public class HomeViewModel { [Required] [DataType(DataType.Html)] [Display(Name = "Note")] public string Note { get; set; } } }
Now my controller:
HomeController.cs
using System.Web.Mvc; using CkEditorTest.Models; namespace CkEditorTest.Controllers { public class HomeController : Controller { public ActionResult Index() { return View(new HomeViewModel()); } [HttpPost] [ValidateInput(false)] public ActionResult Index(HomeViewModel model) { return View(model); } } }
And finally, my opinion:
Index.cshtml
@model CkEditorTest.Models.HomeViewModel @{ ViewBag.Title = "CKEditor Test"; } @section head { <script type="text/javascript" src="@Url.Content("~/Scripts/ckeditor/ckeditor.js")"></script> <script type="text/javascript" src="@Url.Content("~/Scripts/ckeditor/adapters/jquery.js")"></script> <script type="text/javascript"> $(document).ready(function () { $("#Note").ckeditor(); }); </script> } <h2>CKEditor Test</h2> @using (Html.BeginForm()) { @Html.LabelFor(m => m.Note)<br /><br /> @Html.TextAreaFor(m => m.Note)<br /> <input type="submit" /> } @if (!String.IsNullOrEmpty(Model.Note)) { <div id="noteText">@Model.Note</div> }
No matter what I do, I cannot display the Model.Note property as html in my view. By the time it reaches the view, it is HTML encoded (i.e. <p>, etc.). Here's what the form looks like before posting:
pre-post http://www.matthewkimber.com/images/so/pre-post.png
And this is what happens in the div below the submit button:
publish the result http://www.matthewkimber.com/images/so/posted.png
I set a breakpoint in Visual Studio and it displays as angle brackets (no encoding on HTML elements, just characters).
checkpoint results http://www.matthewkimber.com/images/so/dataInsideTheActionMethod.png
This, of course, is a stripped-down test. I tried to encode it, decoding it in both the view and the controller to no avail. Your help is much appreciated! Thanks!