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.
The following image shows how TinyMCE looks on their website (this article will demonstrate how to alter that):
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
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
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"
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
- 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:
Write something in TinyMCE:
<asp:TextBox ID="htmlEditorTxt" runat="server" ClientIDMode="Static"
TextMode="MultiLine" Rows="30" style="width:95%" CssClass="tinymce" />
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.
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