Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

  • mizzle 83 posts 306 karma points
    Dec 03, 2021 @ 17:05

    Enabling a limited font color picker in Rich Text Editor

    I want to allow a very limited number of colors that can be used for text in the TinyMCE rich text editor. I've gotten to the point where the colors I want to allow are showing up as I want them, but I can't get rid of or hide the "Custom..." selector that would allow a limitless range of colors to be picked:


    Is there a way for me to have only the specified colors available within the picker?

    Using Umbraco version 8.17.0.

  • Marc Goodson 1996 posts 13164 karma points MVP 8x c-trib
    Dec 11, 2021 @ 08:23
    Marc Goodson

    Hi mizzle

    How have you set things up so far?

    With the TinyMce ColorPicker plugin?

    the docs for TinyMce suggest there is a color picker callback that can be implemented, but I'm not sure whether that removes the 'custom' link

    There is this phrase:

    When activated in conjunction with the textcolor plugin it adds a "custom color" button to the text color toolbar dropdown

    Which made me then wonder if you had configured both? or whether just the textcolor plugin would do what you need:

    The other thought is would it be best to use the Styles/Format dropdown instead??

    eg are the editors applying colours or meaning to the text?

    if they wanted to make a line of text red, to highlight some important text then... you could have a format dropdown called 'important' that added the css class to be text-important, and in the stylesheet for the rich text editor in the backoffice you could make that appear red, and on the design implementation of the site on the published pages.

    The benefit of that approach is you could change the colours in the stylesheet, and it would update everywhere... whereas, with the rich text editor colour selector, the editor would have to go in and change the colour of the text on every page... (if indeed that theoretical colour change ever happened!)



  • mizzle 83 posts 306 karma points
    Dec 13, 2021 @ 14:28

    Hi Marc,

    I adjusted the TinyMce editor through the tinyMceConfig.config file, adding

    <command alias="forecolor" name="Text color" mode="Selection" />

    to the "commands" section,

    <plugin loadOnFrontend="true">textcolor</plugin>

    to the "plugins" section, and

    <config key="theme_umbraco_more_colors">false</config>
    <config key="theme_umbraco_text_colors">1e1e1e,373737,b38d2e</config>
    <config key="custom_colors">false</config>
    <config key="textcolor_map">
      "1e1e1e", "Black",
      "373737", "Grey"

    to "customConfig"

    It's been a bit of time since I made the edits, but I'm pretty sure those are the only changes I made and they resulted in the sort of display pictured in my screenshot in the initial post.

    I was planning on using the Styles/Format dropdown if I couldn't get the color selection working, but just from a user interface perspective I think the color picker seems easier for editors to understand and utilize. So I wanted to see if I could get that working first.

    Thank you for your reply!

  • Bjarne Fyrstenborg 1275 posts 3921 karma points MVP 7x c-trib
    Feb 01, 2022 @ 15:10
    Bjarne Fyrstenborg

    I just want to mention you need to enabled textcolor plugin as well to get the forecolor (text color) option in richtext editor:

    I was looking at the previous in v7 and now v8, but it is a similar configuration in v9 (although JSON instead of XML):

  • mizzle 83 posts 306 karma points
    Feb 01, 2022 @ 15:25

    I can get the color picker to show just fine, but the issue is that I can't remove the "Custom..." option that allows users to select outside the specified colors.

    I ended up going with Style selections instead, since the priority was limiting the colors to only certain ones.

  • Bjarne Fyrstenborg 1275 posts 3921 karma points MVP 7x c-trib
    Feb 01, 2022 @ 17:36
    Bjarne Fyrstenborg

    Yeah, it seems custom_colors options is new in TinyMCE v5:

    Umbraco still use TinyMCE v4:

    You could of course always try inject custom CSS via a package.manifest, e.g.

    .mce-custom-color-btn {
        display: none !important;

    or maybe inject JavasScript to manipulate the DOM.

Please Sign in or register to post replies

Write your reply to: