TinyMCE HTML Text Editior & ASP.NET MVC - Setting It Up Has Become Easy With Nuget

One of the best Javascript WYSIWYG Editors TinyMCE is now up on Nuget live feed. How to get TinyMCE through Nuget and get it working is documented in this blog post.

9/7/2011 9:15:00 AM 28 comments 12884 times

Overview of the Process

Couple of weeks ago, I was setting up a new project and I have created a folder called ‘lib’ inside the $(SolutionDir) as usual to put all the dependencies that I am going to be using for my project (.Net libraries, JavaScript libraries, etc.).

Then, I go to http://www.tinymce.com/ to grab the latest version of TinyMCE which is an awesome Javascript WYSIWYG Editor. This action popped up a balloon inside my head that tells me I had been doing this stuff over and over again for 80% of the projects that I have created. So this hits me hard and I thought I should automate this process. In order to do that, I’ve created an internal Nuget package just for myself to pull the TinyMCE package with plugins. Even, I have created EditorTemplates so that I could just give my model a hint to use the template.

That worked pretty well for me but don’t miss the point here. That worked pretty well only for me. Not for John, Denis, Adam and so on. After I thought this, I have come across a blog post about TinyMCE integration on ASP.NET MVC 3 (The blog post is in Turkish). Remember the balloon which popped up inside my head? This blog post widened that balloon and it hit me harder this time. The process which has been documented there is a very well working sample but well…, it looked more like a poor man’s TinyMCE integration for me. (The article was nice but it wasn’t following the DRY way)

After that, I have decided to enhance my packages to push them to live Nuget feed. So, I have contacted with the package admins on their forum :

TinyMCE Nuget Package

@Spocke has replied my post in a short time and gave me a go ahead to push the package to live Nuget feed. I am not going to get into details of how I created the package. Mostly, I will show how to set up your environment to get TinyMCE working in a short time.

TinyMCE into an ASP.NET MVC project

It is now easy to get TinyMCE package to your project with Nuget. It’s even easier to get it working with ASP.NET MVC. In this post, I am going show you the easiest way to get it work ASP.NET MVC but I hope I am going to cover for Web Forms as well in near future.

There are several packages which are related to TinyMCE that I have pushed to live Nuget feed as you can see in the picture left hand side. (This list might extend in the future) Briefly the packages are :

TinyMCE : The main package which holds the infrastructure .js files of the library and plugings. This package has no dependency at all.

TinyMCE.JQuery : Holds the JQuery integration files for TinyMCE. This package depends on TinyMCE and JQuery packages.

TinyMCE.MVC : This package holds the ASP.NET MVC EditorTemplates for TinyMCE. This package depends on TinyMCE package.

TinyMCE.MVC.JQuery : Holds the ASP.NET MVC EditorTemplates for TinyMCE.JQuery. This package depends on TinyMCE.JQuery package.

TinyMCE.MVC.Sample : Holds a sample ASP.NET MVC mini Application (it is all just a model, a controller and a view) for TinyMCE. This package depends on TinyMCE.MVC package so it uses EditorTemplates to illustrate a sample.

TinyMCE.MVC.JQuery.Sample : This package holds a sample ASP.NET MVC mini Application (it is all just a model, a controller and a view) for TinyMCE.JQuery. This package depends on TinyMCE.MVC.JQuery package so it uses EditorTemplates to illustrate a sample.

How to get TinyMCE work on and ASP.NET MVC project

I would like set the boundaries here :

This will demonstrate the process of integrating TinyMCE to an ASP.NET MVC application.
I will use the JQuery one because it has more downloads on Nuget
I will work with the TinyMCE.JQuery.MVC package to pull down all the TinyMCE stuff along with ASP.NET MVC EditorTemplates.

Always first thing to go is File > New Project > ASP.NET MVC 3 Web Application.

In order to make it more clear, I have created a very simple BlogPost model to work with. First, I am going to show you the way without TinyMCE then later we will bring it down through Nuget.

The model looks like as below :

    public class BlogPost {

        public string Title { get; set; }
        public DateTime PostedOn { get; set; }
        public string Tags { get; set; }
        public string Content { get; set; }

    }

Then I created a controller to create a new blog post (assume here this model is related to database). The controller is simple :

using System.Web.Mvc;
using TinyMCEJQueryMVCNuget.Models;

namespace TinyMCEJQueryMVCNuget.Controllers {

    public class BlogPostController : Controller {

        public ActionResult Create() {

            return View();
        }

        [HttpPost, ActionName("Create")]
        public ActionResult Create_post(BlogPost model) {

            ViewBag.HtmlContent = model.Content;

            return View(model);
        }

    }
}

It basically does noting. Just getting the model on the http post event and pushing it back to the view with a ViewBag property.

Here is what some portion of our view looks like :

@using (Html.BeginForm()) {
    
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>BlogPost</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.Title)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Title)
            @Html.ValidationMessageFor(model => model.Title)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.PostedOn)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.PostedOn)
            @Html.ValidationMessageFor(model => model.PostedOn)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Tags)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Tags)
            @Html.ValidationMessageFor(model => model.Tags)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Content)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Content)
            @Html.ValidationMessageFor(model => model.Content)
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>

        <p>
            Posted Content : @ViewBag.HtmlContent
        </p>

    </fieldset>
}

When we open it up, we will see nothing fancy there :

When we post it, we will get this result :

So, we got this baby working. Let’s improve it. What we need here is to give the blogger a real blogging experience. In order to do that, we need a text editor so that we could enter our content pretty easily.

First thing is to pull down the TinyMCE.JQuery.MVC package over the wire.

When you start installing the package, your solution will have a movement so don’t freak out Smile

So now we have our package installed, we are ready to make some changes on our model. When you go to ~/Views/Shared/EditorTemplates folder on your solution, you will see that there is a cshtml file there called tinymce_jquery_full.cshtml. This partial view enables you to view your model property with TinyMCE editor.

I am not going to go inside this file and explain how to do this (however, it is pretty simple). It is entirely an another topic.

What I would like to point out here is this : if you are working with this package (TinyMCE.JQuery.MVC), you need to have JQuery referenced on your file. We have our JQuery referenced on our _Layout.cshtml file so we do not need to do anything else.

As I got the information from the project admins, TinyMCE can work with JQuery 1.4.3 and after. You don’t need to worry about that as well. Nuget will resolve the dependency without you knowing.

Change to Our Model

To get it work, we need to change our model as follows :

using System;
using System.ComponentModel.DataAnnotations;
using System.Web.Mvc;

namespace TinyMCEJQueryMVCNuget.Models {

    public class BlogPost {

        public string Title { get; set; }
        public DateTime PostedOn { get; set; }
        public string Tags { get; set; }

        [UIHint("tinymce_jquery_full"), AllowHtml]
        public string Content { get; set; }

    }
}

What UIHint attribute does here is to tell the framework to use tinymce_jquery_full editor template instead of the default one. AllowHtml is also there to allow html string to pass from your browser to the server. Build you project and run it again and then you should see a page similar to following one:

If you are unable to see this when you run your application, this can be related to several things. First thing I would do is to check if the Content property is used with EditorFor instead of another Html Helpers :
        <div class="editor-label">
            @Html.LabelFor(model => model.Content)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Content)
            @Html.ValidationMessageFor(model => model.Content)
        </div>
The second thing would be a JavaScript error related to misconfiguration or a wrong library reverence. Check your browser console for any JavaScript errors for that.

Now when we post it back to server, we will get it back as :

Very nice. Html has been created for us behind the scenes.

It displays it as encoded html because we didn’t specify to view as raw html. In order to do that, just use @Html.Raw.

I hope this will help you to automate some portion of your project as well.

Comments

#2170

re: TinyMCE HTML Text Editior & ASP.NET MVC - Setting It Up Has Become Easy With Nuget

by Lee Dumond on 09/08/11 3:59:28 Thursday (UTC -04:00)

Does this also install EditorTemplates that use a smaller subset of controls?

And if not, how easy is it to modify tinymce_jquery_full to use only a custom subset of controls?

#2171

re: TinyMCE HTML Text Editior & ASP.NET MVC - Setting It Up Has Become Easy With Nuget

by tugberk on 09/08/11 9:48:17 Thursday (UTC -04:00)

@Lee

I was lazy a bit when I created the TinyMCE.MVC.JQuery package so I didn't put a EditorTemplate of lightweight version of TinyMCE.

I wouldn't modify the tinymce_jquery_full. What I would do instead is to create a new EditorTemplate for my needs.

Even I would make it a nuget package and put it there on the live nuget feed and take TinyMCE.MVC.JQuery package as dependency.

I will probably add more sample to my package but you could do that now if you want.

#2174

re: TinyMCE HTML Text Editior & ASP.NET MVC - Setting It Up Has Become Easy With Nuget

by Lee Dumond on 09/08/11 21:38:31 Thursday (UTC -04:00)

Yeah... to make good use of this, I would need to create smaller, customized Editor Templates. I often find that for a lot of client projects, offering every MCE control just confuses people.

"Trop de choix tue le choix" (Too much choice kills the choice)

#2175

re: TinyMCE HTML Text Editior & ASP.NET MVC - Setting It Up Has Become Easy With Nuget

by tugberk on 09/08/11 22:32:50 Thursday (UTC -04:00)

@Lee

It is pretty easy to create an editor template as well.

#2244

re: TinyMCE HTML Text Editior & ASP.NET MVC - Setting It Up Has Become Easy With Nuget

by Lance Larsen on 11/22/11 23:59:46 Tuesday (UTC -05:00)

You totally rock - thanks for doing all of the heavy lifting to get this setup!

#2245

re: TinyMCE HTML Text Editior & ASP.NET MVC - Setting It Up Has Become Easy With Nuget

by Tugberk on 11/23/11 10:43:26 Wednesday (UTC -05:00)

@LanceLarsen

glad that it helped;)

#2254

re: TinyMCE HTML Text Editior & ASP.NET MVC - Setting It Up Has Become Easy With Nuget

by tobi on 11/30/11 16:42:17 Wednesday (UTC -05:00)

This is terrible from an HTML injection standpoint. No protection at all.

#2255

re: TinyMCE HTML Text Editior & ASP.NET MVC - Setting It Up Has Become Easy With Nuget

by Tugberk on 12/02/11 0:08:39 Friday (UTC -05:00)

@tobi

ha ha! here, you are looking at the wrong direction my dear.

#2326

re: TinyMCE HTML Text Editior & ASP.NET MVC - Setting It Up Has Become Easy With Nuget

by Mike on 01/30/12 3:58:44 Monday (UTC -05:00)

This is awesome!

But it doesn't work :-((( The reason is because there are a number of references in both the MVC and JQuery packages to "tinymce.3.4.5" which doesn't exist.

But, it's easy to fix :-))) - just find "tinymce.3.4.5" and replace with "tinymce".

Also, the editor templates in the samples (tinymce_full.cshtml and tinymce_full_compressed.cshtml) have a line for:

content_css : "@Url.Content("~/Scripts/tinymce/css/content.css")",

It should read:

content_css : "@Url.Content("~/Scripts/tinymce/themes/advanced/skins/default/content.css")"

#2333

re: TinyMCE HTML Text Editior & ASP.NET MVC - Setting It Up Has Become Easy With Nuget

by prunked on 02/02/12 20:05:30 Thursday (UTC -05:00)

Hi there!

First of, great example of integrating TinyMCE into a MVC project. However, i struggled into a problem when integrating it into one of my projects (using nested models).

Instead of using "Viewdata.TemplateInfo.GetFullHtmlFieldName(string.Empty)" you should use "Viewdata.TemplateInfo.GetFullHtmlFieldId(string.Empty)" in order to select the textarea.

Greetz,

prunked

#2334

re: TinyMCE HTML Text Editior & ASP.NET MVC - Setting It Up Has Become Easy With Nuget

by Tugberk on 02/05/12 11:53:12 Sunday (UTC -05:00)

@prunked

Yes, you are right. It'll brake if you have different id and name attribute values. I should have it fixed and push a new version of the templates.

Thanks for the input!

#2406

re: TinyMCE HTML Text Editior & ASP.NET MVC - Setting It Up Has Become Easy With Nuget

by James Skemp on 03/13/12 22:39:48 Tuesday (UTC -04:00)

Ran into the same issue prunked ran into when I dropped this into a project today.

Also noticed that the script references within tinymce_jquery_full.cshtml needed to be updated; the tinymce scripts were added to the project without a version number in the path.

#2408

re: TinyMCE HTML Text Editior & ASP.NET MVC - Setting It Up Has Become Easy With Nuget

by John on 03/14/12 0:36:38 Wednesday (UTC -04:00)

@prunked

Thanks for finding that one.. it helped me get the editor to bind. I appreciate you coming back to help others with what you found.

Also thanks to @Tugberk for putting this together.

#2413

re: TinyMCE HTML Text Editior & ASP.NET MVC - Setting It Up Has Become Easy With Nuget

by gautam paliwal on 03/14/12 16:17:05 Wednesday (UTC -04:00)

object is not supported _TMS

#2429

re: TinyMCE HTML Text Editior & ASP.NET MVC - Setting It Up Has Become Easy With Nuget

by Michee on 03/19/12 10:15:37 Monday (UTC -04:00)

Realy easy to set up with Nuget! but how to set the plugins using Ajax: in my site i'm getting the content using Ajax call, but the plugin is not workink for my Partial View. however it's working when loading content without ajax.

#2431

re: TinyMCE HTML Text Editior & ASP.NET MVC - Setting It Up Has Become Easy With Nuget

by Tugberk on 03/22/12 15:15:59 Thursday (UTC -04:00)

I updated the package and now there should be no problems:

TinyMCE.MVC.JQuery 3.4.7 is stable and does not need any modification.

#2443

re: TinyMCE HTML Text Editior & ASP.NET MVC - Setting It Up Has Become Easy With Nuget

by bahar on 04/02/12 14:54:39 Monday (UTC -04:00)

thanks a lot

#2444

re: TinyMCE HTML Text Editior & ASP.NET MVC - Setting It Up Has Become Easy With Nuget

by bahar on 04/02/12 17:04:38 Monday (UTC -04:00)

hi how to modify Stored Text ???

#2445

re: TinyMCE HTML Text Editior & ASP.NET MVC - Setting It Up Has Become Easy With Nuget

by Tugberk on 04/02/12 17:31:05 Monday (UTC -04:00)

@bahar

what do you mean by that?

#2447

re: TinyMCE HTML Text Editior & ASP.NET MVC - Setting It Up Has Become Easy With Nuget

by coommark on 04/05/12 21:49:03 Thursday (UTC -04:00)

Thanks @Tugberk for this package! Exactly what I am looking for! Thanks!

#2472

re: TinyMCE HTML Text Editior & ASP.NET MVC - Setting It Up Has Become Easy With Nuget

by Borrie on 04/26/12 10:18:29 Thursday (UTC -04:00)

Tugberk,

First of all thanks a lot for sharing this code, it works like a charm.

I have two questions, in order to save the text to a database, how should I declare the coumn in my db?

Also, do you know how to set up the image upload function?

Tx,

Borrie

#2506

re: TinyMCE HTML Text Editior & ASP.NET MVC - Setting It Up Has Become Easy With Nuget

by Mike Clarke on 05/14/12 23:06:32 Monday (UTC -04:00)

Brilliant,

I have been putting this off for a while as I had it all set up for Webforms and thought I will have to go through the whole learning experience again for MVC, but this soooo simple. Coming from someone who has set up a RTE in Classic ASP…lol.

I found you via SO and wanted to +1 you there but I only had 12 points and someone voted me down for asking a silly question so I can’t, but +1 from my heart anyway!

Cheers,

Mike.

#2507

re: TinyMCE HTML Text Editior & ASP.NET MVC - Setting It Up Has Become Easy With Nuget

by Mike Clarke on 05/14/12 23:09:23 Monday (UTC -04:00)

@Tugberk,

nvarchar(MAX)

Cheers,

Mike.

#2509

re: TinyMCE HTML Text Editior & ASP.NET MVC - Setting It Up Has Become Easy With Nuget

by Kulpem on 05/17/12 9:58:12 Thursday (UTC -04:00)

Thanks for the great Post,

after I click the Create button I get this error

The current request for action 'Create' on controller type 'MailController' is ambiguous between the following action methods:
System.Web.Mvc.ActionResult Create_post(Rimonim.Models.MailDetail) on type Rimonim.Controllers.MailController
System.Web.Mvc.ActionResult Create(System.Web.Mvc.FormCollection) on type Rimonim.Controllers.MailController

Any help???

#2510

re: TinyMCE HTML Text Editior & ASP.NET MVC - Setting It Up Has Become Easy With Nuget

by Kulpem on 05/17/12 10:00:28 Thursday (UTC -04:00)

btw, Can you post the entire project as an example???

#2511

re: TinyMCE HTML Text Editior & ASP.NET MVC - Setting It Up Has Become Easy With Nuget

by Tugberk on 05/17/12 14:24:43 Thursday (UTC -04:00)

@Kulpem

Make sure to anotate Create_post method with HttpPost attribute as above.

#2512

re: TinyMCE HTML Text Editior & ASP.NET MVC - Setting It Up Has Become Easy With Nuget

by Kulpem on 05/17/12 16:17:00 Thursday (UTC -04:00)

Done that. thats why I'm surprised with this error

#2513

re: TinyMCE HTML Text Editior & ASP.NET MVC - Setting It Up Has Become Easy With Nuget

by Kulpem on 05/17/12 16:27:05 Thursday (UTC -04:00)

My mistake. I had another create function made by vs2010. Didn't know it's there.

Great Post. Thank you very much for sharing

Additional allowed tags : [quote]...[/quote], [user]...[/user]

TinyMCE HTML Text Editior & ASP.NET MVC - Setting It Up Has Become Easy With Nuget

Comments

Connect With Me

Tags

Archive

Blogroll