Today most modern content management systems rely on TinyMCE as the richtext editor for inputing HTML. TinyMCE has become the industry standard with its user friendly interface and open source licensing. However, each CMS on the market has a slightly different integration of TinyMCE.
This post will quickly recap working with TinyMCE in Umbraco and how to modify it when needed.
First, the way Umbraco treats all methods of content input is through what are called Datatypes, to make a long story short, Datatypes are simply different ways to input data by the user. For instance, each of the following is a Datatype — a file upload, a text string, a text area, a radio button choice list, etc. Each Datatype is made up of a control which has a number of selectable options, see below:
So, in Umbraco, Richtext Editor is a Datatype that uses the TinyMCE wysiwyg control — this is powerful because it means you can create multiple instances of TinyMCE, each one having different customizations. For instance, you might want a full set of features for editing Body Content and a very stripped down set of features for editing Customer Testimonials.
The first way to add or remove features with TinyMCE is to simply select the datatype that uses it (i.e. Richtext Editor) and update the control options (just like the above image). If you want the user to have alignment simply check those options and save the Datatype.
But sometimes the default options are not enough and you need to extend TinyMCE past its out-of-the-box setup. Updating this functionality is done through the TinyMCE configuration file, located in the ~/config/tinyMceConfig.config file. When this file is modified the Datatype control options (shown above) will be updated to reflect. Once the config file has been updated the IIS site will need to be restarted, this can be done via IIS on the server, or by simply touching the web.config file.
Within the tinyMceConfig.config file is an XML buildout of options, each one offering customization. For instance, you can specify which HTML elements and attributes are valid within TinyMCE:
<validElements> <![CDATA[+a[id|style|rel|rev|charset|hreflang|dir|lang|tabindex|accesskey|type|name|href|target|title|class|onfocus|onblur|onclick|ondblclick|onmousedown|onmouseup|onmouseover|onmousemove|onmouseout|onkeypress|onkeydown|onkeyup], -strong/-b[class|style], -em/-i[class|style], -strike[class|style], -u[class|style], #p[id|style|dir|class|align], -ol[class|style], -ul[class|style], -li[class|style], br, img[id|dir|lang|longdesc|usemap|style|class|src|onmouseover|onmouseout|border|alt=|title|hspace|vspace|width|height|align|umbracoorgwidth|umbracoorgheight|onresize|onresizestart|onresizeend|rel], -sub[style|class], -sup[style|class], -blockquote[dir|style], ...and so on...]]> </validElements>
Or you can update the actual toolbar options for TinyMCE, in the case below: Font Size and Color (hopefully sometime you will never have to enable):
<command> <umbracoAlias>mceFontSize</umbracoAlias> <icon>images/editor/fontSize.png</icon> <tinyMceCommand value="" userInterface="false" frontendCommand="fontsizeselect">fontsizeselect</tinyMceCommand> <priority>21</priority> </command> <command> <umbracoAlias>mceForeColor</umbracoAlias> <icon>images/editor/forecolor.gif</icon> <tinyMceCommand value="" userInterface="true" frontendCommand="forecolor">forecolor</tinyMceCommand> <priority>22</priority> </command>
Important: Please note, if you update the above configuration file and the corresponding umbraco_client files an upgrade of Umbraco will overwrite these changes. You’ll want to make sure to backup any updates before running an upgrade.