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></pre>
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></pre>
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></pre>
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.
