CodeGarden 10: The sixth annual Umbraco Developer Conference
June 23-25th 2010 - free ASP.NET MVC pre-conference. Register today!

How to add extra HTML functionality to TinyMCE

This page will explain how to add acronym and abbreviation tags to the TinyMCE editor, a process which should take no more than 10 mintues. Remember to save regularly and also when editing the config/tinyMceConfig file you will either need to restart IIS or the Application Pool or open web.config add a space then delete and save the file. This will force Umbraco to restart the application for the changes to take effect.

First open config/tinyMceConfig.config

At the bottom of the commands list after command 74 add the following two new commands:

    <command>
      <umbracoAlias>acronym</umbracoAlias>
      <icon>images/editor/acronym.gif</icon>
      <tinyMceCommand value="" userInterface="true" frontendCommand="acronym">acronym</tinyMceCommand>
      <priority>75</priority>
    </command>
    <command>
      <umbracoAlias>abbr</umbracoAlias>
      <icon>images/editor/abbr.gif</icon>
      <tinyMceCommand value="" userInterface="true" frontendCommand="abbr">abbr</tinyMceCommand>
      <priority>76</priority>
    </command>

Make sure that their priority numbers continue sequentially - 75 and 76.

Next in the plugins section just below commands add a new plugin for xhtmlxtras at the bottom of the plugins list.

<plugin loadOnFrontend="false">xhtmlxtras</plugin>

At this point if you save the file and restart the application, in the Rich Text Editor (RTE) data type you should now see the two new acronym and abbreviation check boxes.

The third addition to config/tinyMceConfig.config is to tell Umbraco not to strip out the acronym and abbreviation tags when saving text in the Content view. By default Umbraco will strip out tags unless otherwise told.

Below <plugins> is <validElements> within the CDATA at the end of the array after 'code' and before the closing CDATA statement ]]> add the following:

acronym[title|id|class|style|lang|dir],abbr[title|id|class|style|lang|dir]

(Remember to put a comma after code and before acronym)

Save the file and either restart IIS, Application Pool or open web.config add a space then delete and save.

At this point the functionality will be fully working if you have checked the boxes in the RTE data type in the Developer section. The only two remaining items to add are the images for the check boxes which currently have textual names. You can leave the data type like this if you wish or you can create two of your own images which mesaure 20 x 20 pixels and place them in the location below remembering to save them as abbr.gif and acronym.gif

umbraco\images\editor

The images are already built into the TinyMCE editor though you will need to use Fireworks or another program to cut them out. The file for this is found here:

umbraco_client\tinymce3\themes\advanced\img\icons.gif

The two icons to cut out are ABBR and A.B.C. which are located on the second line near the end of the row.

You will now have abbreviations and acronym functionality within Umbraco. There are a lot of other options available and you can learn more from the TinyMCE website: http://tinymce.moxiecode.com/