Integrating TinyMCE 4.0b3 into an ASP.NET 4.0 Project

It is very common to need a WYSIWYG HTML editor on your website.  I can think of a few examples off the top of my head.  Discussion forums such as MSDN and stackoverflow.com have an HTML editor when you submit or reply to a post.  Evernote also has an HTML editor for creating/editing notes.  There are countless other examples.  The point is, you may need one at some point in the lifecycle of your website.

TinyMCE is a nice choice…I’ll let their website do the selling:  “TinyMCE is a platform independent web based Javascript HTML WYSIWYG editor control”  There are plenty of posts that tell you how to integrate TinyMCE version 3.x into an ASP.NET website, but I haven’t seen any for 4.0 beta 3 (the version as of 5/17/2013).  This article will do just that.

The following image shows how TinyMCE looks on their website (this article will demonstrate how to alter that):

TinyMCE website

Download TinyMCE

When I started to create a website for this blog, I immediately went and tried to download this from NuGet in VS2010 but they only have the latest stable 3.x version.  So I needed to download it from here:  http://www.tinymce.com/download/download.php

tinymcedownloadpage

I chose the jQuery package since I like using jQuery.  I copied it to the Scripts folder of my ASP.NET 4.0 website and then made it part of the project as shown here:

scripts folder

Add TinyMCE to ASP.NET Page

Now I will add a reference to the tinymce.min.js file in my default ASP.NET page

Notice that I use ResolveUrl so that it doesn’t matter if the page moves around in the folder structure of the site.

Now I will add the script that initializes TinyMCE.  This initialization will do the following:

  • Select which control or controls will get the HTML editor
  • Customize how it looks and what options to display

Note the following about the preceding code:

  • Line 3 selects which control(s) are the HTML editors (in this case, I select using a CSS class…think jQuery here)
    • Note that the classic example for selector is “textarea” but you may not want all textareas to be chosen
  • Lines 8-9 list the plugins available to the control, this allows you to control how many javascript files you download as each plugin has its own file (you can customize your tinyMCE download to put all files into one as well)
  • Lines 10-11 define what goes on each toolbar (if you only want one, just specify “toolbar”). The “|” character is a toolbar separator.

Finally add the TextBox with the tinymce css class:

There are some important things to note for the TextBox definition:

  • The ClientIDMode must be “Static”.  From MSDN, this means: “The ClientID value is set to the value of the ID property.”  This helps TinyMCE select the control properly.
  • The TextMode must be “MultiLine” and you should specify the Rows
  • The CssClass is used here just as a selector so TinyMCE knows which TextBox to decorate.

The Look of TinyMCE

Here is how it looks:

output

Note that each toolbar item has full context help so your user will know what they are clicking.

Conclusion

TinyMCE is a nice HTML editor that is free and feature rich.  It is also easy to add to your ASP.NET 4.0 project.  It can also be added to an MVC project.  For more information on how to code ASP.NET applications, see the Intertech offerings here:  http://www.intertech.com/Training/Microsoft/Visual-Studio/ASP-NET

 

  • kamil

    Good article!! Everything works but I don’t have icons on buttons. What can be the issue?

  • Hani Abbas

    Same here. I don’t see the icons on the buttons (4.0.3) on IE 10.

  • Rich Franzmeier

    I was able to reproduce your problem. But only when IE10 is in compatibility mode. According to this post: http://www.tinymce.com/forum/viewtopic.php?id=30966, you should add this meta tag in your page’s section:

    That fixed it for me. Hope it helps!

  • Jason Castro

    hi can you help me.. i need a character count for tinyMCE.. thanks

{Offer-Title}

{Offer-PageContent}
Click Here