Integrating TinyMCE

 Integrating TinyMCE 

• 
  

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):

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

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:

Add TinyMCE To ASP.NET Page

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

1 2	<script type="text/javascript" src='<%=ResolveUrl("~/Scripts/tinymce/js/tinymce/tinymce.min.js") %>'> </script>

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

1 2 3 4 5 6 7 8 9 10 11 12 13

<script type="text/javascript">     tinymce.init({         selector: ".tinymce",         theme: "modern",         menubar: false,         resize: false,         statusbar: false,         plugins: ["advlist autolink lists charmap preview hr anchor",             "pagebreak code nonbreaking table contextmenu directionality paste"],         toolbar1: "styleselect | bold italic underline | pagebreak code preview | undo redo",         toolbar2: "alignleft aligncenter alignright alignjustify | bullist numlist outdent indent"     }); </script>

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)
  • For a list of all plugins, see here:  http://www.tinymce.com/wiki.php/Plugins
• Lines 10-11 define what goes on each toolbar (if you only want one, just specify “toolbar”). The “|” character is a toolbar separator.
  • For a list of all toolbar and menu controls, see here: http://www.tinymce.com/wiki.php/Controls

Finally add the TextBox with the tinymce css class:

1 2 3 4 5

<p>     Write something in TinyMCE:     <asp:TextBox ID="htmlEditorTxt" runat="server" ClientIDMode="Static"         TextMode="MultiLine" Rows="30" style="width:95%" CssClass="tinymce" /> </p>

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:

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