I did a post earlier today (yes, I’m on a roll while jr. is sleeping!) on my Top 10 favorite jQuery functions and plugins. This post is dedicated to one of them: TinyMCE. In the past I’ve used editors like Telerik’s RAD Editor and obout’s Html Editor, both very powerful editors. I was turned on to TinyMCE not too long ago, and haven’t looked back since.

Integrating TinyMCE into any ASP.NET project (MVC included) is really easy, this post will cover the basics of setting up TinyMCE, and then some of the different variations available.

Setup TinyMCE

After you download TinyMCE, copy all the files into your project. Typically I’ll drop the TinyMCE folder into my “Scripts” directory. Once copied, you add a reference in either your page’s header:

<script type="text/javascript" src="<%=Url.Content("~/scripts/tiny_mce/tiny_mce.js") %>"></script>
1

<h2>Initialize TinyMCE</h2>
This is where the fun begins. You can show all the possible buttons, or just a subset of buttons if you need to keep it simple. Below is a "keep it simple" scenario, where only the most basic buttons are presented to the user:

1
tinyMCE.init({
mode: "textareas",
theme: "advanced",
plugins: "style,iespell,searchreplace,contextmenu,paste,html",

// Theme options
theme_advanced_buttons1: "bold,italic,underline,formatselect,cut,copy,paste,pastetext,pasteword",
theme_advanced_buttons2: "fontselect,fontsizeselect,|,link,unlink,code",
theme_advanced_buttons3: "justifyleft,justifycenter,justifyright,justifyfull,|,bullist,numlist",
theme_advanced_buttons4: "",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_resizing: true,
readonly: false
});

The theme_advanced_buttons1 – 4 represent the rows where the buttons will appear. If you have a really wide textarea, you could theoretically show all the buttons on a single row. Consult the TinyMCE documentation for a detailed list of every single button.

Next is the generic “advanced” configuration I’ll use when I have a more savvy user. It gives users a html button so they can modify the markup:

tinyMCE.init({
mode : "textareas",
theme : "advanced",

theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_resizing: true,
readonly: false
});

There are also times where I want to keep the custom toolbar, but also allow the user to show/hide the html. To accomplish that, you can add this hyperlink:

<a href="#" onclick="ToggleEditor('textareaID');">Show/Hide Html</a>

And this function:

function ToggleEditor(id)
{
if (!tinyMCE.get(id)) {
tinyMCE.execCommand('mceAddControl', false, id);
}
else {
tinyMCE.execCommand('mceRemoveControl', false, id);
}
}