Community Server on my mind

Adding more buttons to TinyMCE in CS

Community Server 2.1 uses TinyMCE as the build-in editor for posting in forums, blogs etc. You can choose in your profile if you want to run the Standard or Enhanced implementation of TinyMCE in CS.

Figure 1: Content Editor Options in your profile

Even though I always use the Enhanced version myself, I find myself from time to time to miss some functions of the editor. I remember back in the days when FreeTextEditor was used, there was some table functionality that I used a lot in some cases. So I started to research a bit what TinyMCE could do. I knew it was a 3rd party from CS.

What I found out was that TinyMCE has a kind of plugin framework to add functionality to the editor. For example "Paste from Word" and "IE Spell" are 2 plugins available in CS implementation of TinyMCE.

I won't tell the long story of all the trial and errors that bumped my way to the solution but just spell out which way I managed to get it to work. Just want to point you to the thread where Ben Tiedt (Telligent) helped my find the last piece of the puzzle.

So for example, let's say you want to add the button/buttons for tables.

Figure 2: Table buttons added to TinyMCE in CS

The tables function is a plugin to TinyMCE, but you won't find all the plugins for TinyMCE bundled with your CS download, so you have to download them from i.e. the homepage of TinyMCE. Note that in some cases you might need the same version of the plugin as the version of the CS bundled TinyMCE (which is 2.0.6.1, see the forums thread I referred to above). In my case it didn't work at all with a plugin for a newer version.

Then follow these steps:

1. Open and edit the Skin-Editor-Enhanced.ascx (and/or the Skin-Editor-Standard.ascx if that's the one you want to change). Located in the Themes\default\Skins folder.
   
2. Add the table plugin to the TinyMCEOption plugins tag:
   <TMCE:TinyMCEOption runat="server" Name="plugins" Value="'contentselector,paste,table,smilies,iespell'" />
   
3. Add the tablecontrols to one of the toolbars, i.e. theme_advanced_buttons2
   <TMCE:TinyMCEOption runat="server" Name="theme_advanced_buttons2" Value="'bold,italic,underline,strikethrough, separator,tablecontrols,indent,outdent,separator, bullist,numlist,separator,link,unlink,image,
   contentselector,smiley'" />
   
4. Check that you have the right option for Content Editor in your profile as in Figure 1 above.

Older versions of the TinyMCE (newest version as of this writing is 2.0.8) can be downloaded from for example this link.