Using The TinyMCE Color Picker in Umbraco

The Umbraco folks, for whatever reason, decided to strip out the text color picker in TinyMCE. I found that many of my users still need it, and I would rather not create custom styles for each of them. After a lot of blundering around, I found this Our Umbraco forum post which outlines how to add the color picker back in. I took it a little further and found it was real easy to limit the palette of colors available to the user. This can all be done in the tinyMceConfig.config. I’ve only used this on Umbraco 4.7.1.1.

Steps are as follows:

1.) Open config/tinyMceConfig.config in a text editor.

2.) To add the color picker button back to toolbar, add the following command to the <commands> node:

<command>
    <umbracoAlias>mceForeColor</umbracoAlias>
    <icon>images/editor/forecolor.gif</icon>
    <tinyMceCommand value="" userInterface="true" frontendCommand="forecolor">forecolor</tinyMceCommand>
    <priority>21</priority>
</command>

NOTE: Customize the priority based on where you’d like the button to be placed. I gave mine a “21” and I adjusted the others accordingly.

3.) To remove the “More Colors” link from the color picker, add the following to the <customConfig> section:

<config key="theme_umbraco_more_colors">false</config>

4.) Then to limit the palette available to the user, also add this key to the <customConfig> node:

<config key="theme_umbraco_text_colors">000000,0079E3,FF0033</config>

NOTE: Include your own RGB colors here. In my case, I’ve only decided to make these three (000000,0079E3,FF0033) available.

5.) “Touch” the web.config to recycle the application so the changes will take effect.

6.) Log in to the Umbraco backend and in the TinyMCE/Rich Text Editor/wysiwyg data type, enable the color picker button.

Presto! That’s it, the editor should now show the color picker.

6 thoughts on “Using The TinyMCE Color Picker in Umbraco

  1. Andrew Gale says:

    This didn’t work for me – I got server error when trying to load the richtext editor.

    I didn’t include the “pre” tags though because they had no corresponding beginning tag, is that correct ?

      • Connie DeCinko says:

        Umbraco 6.2.5 but your instructions work just fine. Not sure which version of TinyMCE comes with Umbraco 7 but 6 has TinyMCE 3.

      • Ah, good to know it’s still relevant :). TinyMCE 4 has a text color plugin that takes a textcolor_map and allows you to map names to hex colors, but as far as I can tell, TinyMCE 3 doesn’t have any way to add named colors, just a list of hex values. Any existing TinyMCE 3 settings should be configurable through the tinyMceConfig.config.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s