How TinyMCE is supposed to work on ASP.NET MVC page?

Question

Hello,

In a previous question someone point out to me that TinyMCE is a nice and free WYSIWYG editor. Since then, the easiest part has been downloading the resource and have a editor being displayed on an ASP.NET MVC sample page. However, I haven't yet been able to make it work (even after surfing in the net - even in the TinyMCE's website I didn't see anything for first time user).

Well, maybe the main point is to know how the thing's supposed to work. For instance, I've placed a button in the same Html.BeginForm where the TextArea is located. But when I clicked it, there was no post-back happening. So, here's my question:

What the concept behind the editor?

1. How do I get it post the content? (using a button, a link???)
2. How do I receive the value posted in my action method? (using a local string variable - (model binding?))
3. What am I supposed to expect? (text, fragment of HTML, both???)

If someone can provide me with resource on that, that would nice. However, for now, I'd like to know how that's work.

Thanks for helping.

Answer 1

TinyMCE overlays on top of a textarea.

Use a TinyMCE textarea just like you'd use a regular textarea.

Answer 2

TinyMCE takes a standard <textarea> element and turns it into a Rich Text Editor using JavaScript. So in your ASP.NET MVC Views you simply create a textarea in the normal way eg

<% Html.TextAreaFor(m => m.Description) %>

When TinyMCE converts this to a textarea it'll still maintain the same id's and name attributes on your textarea element:

<textarea id="Description" name="Description"></textarea>

So model binding should continue to work as normal, it's the name attribute in that code sample above that gets submitted when you post, TinyMCE won't change that, so your POST data will look something like: Description=<p>Hello world</p>&MyButton=Submit (form POST data is simply name/value pairs separated by &ampsersands).

So in your Controller Action:

[HttpPost]
public ActionResult SaveProduct(Product product)
{
    string description = product.Description;

    // Save Product to database (snip)
}

'description' variable will contain the raw HTML markup from TinyMCE. So this should all work as normal, not sure why it isn't. Can you verify that the form is set up and posting as normal, eg. by removing the TinyMCE and just having a standard textarea.

Also, you're not using the <asp:TinyMCE WebForms control by any chance?