Here at fastfwd, we work on a number of Umbraco projects
, and although the framework is brilliant in itself, from time to time we need to go find non-standard solutions to problems posed by our clients. One of our .Net development team
tells us more...
Unfortunately, although Umbraco does use TinyMCE
, it doesn't come configured with the text colour picker. However, a fair few clients would still want the flexibility of changing colours within their content. The non-dev solution would be to set up color classes in the CSS - however this is unnecessary and still doesn't allow the customisation of text colour on a whim.
On a recent project, we needed to enable tinyMCEs textcolour picker on the Umbraco Richtext editor with predefined colours. The question was; how the hell do we go about doing this? Additionally, to keep the content "on brand” we needed to lock down the colours available so that they are limited to brand safe colours, in line with the client's strict guidelines.
Umbraco uses TinyMCE and has a configuration file called tinyMceConfig.config located in the sites config folder.
If you are unaware of this “Umbraco using tinyMce”, you can go to the developer section and expand the datatype node. Find and click on the richtext editor node in order to see the selected datatype pane on the right. See image below.
Configuring the tinyMceConfig.config file
In the tinyMceConfig file, take note of the xml structure as seen on the image below “tinymceConfig > commands > command
We’re interested in the
node and its children. The plugin we’re trying to enable can be located here /umbraco/lib/tinymce/plugins/textcolor/plugins.js
Copy the below code and place it anywhere within the
node or just after the last
The priority defines the position of the toolbar menu item on the richtext editor. In this case I have decided to increment the last command priority value on this command. This will position the textcolour picker at the bottom of the toolbar menu on the richtext editor.
Let’s tell Umbraco to load the textcolor on the richtext editor. See image below.
Search for the
node in the tinyMceConfig
file and add the below code inside the
Now that we have added the above codes, now is the right time to add custom configuration for the textcolor picker.
Remember the client requested that we only enable some colours in the textcolor pallet. This can be achieved using the
node section in the tinyMceConfig file. In the
node we have child nodes called
. Add below code to the
"4d88ad", "Primary blue",
"253e51", "Dark blue",
Touch the web.config in order to recycle the app pool
Jump over to the Richtext editor datatype and enable the newly added plugin. Search for mceforecolor on the datatype toolbar field and check the checkbox.
Navigate to a content page using the RTE datatype and confirm if the text colour works as expected.
That’s all! As you can see, it's a fairly simple process - just took a bit of figuring out. If you are ever stuck on an Umbraco project and need professional help, feel free to contact us.