add text color to tinymce rich text editor in umbraco 9 - Umbraco 9

ShannonC 6 posts 78 karma points

Aug 24, 2021 @ 14:16

Add Text color to TinyMce Rich Text Editor in Umbraco 9?

Umbraco 9

Hello, I am trying to get textcolor plugin added to the rich text editor. I have tried this in appsettings.json and no luck.

 "Umbraco": {
    "CMS": {
      "Hosting": {
        "Debug": false
      },
      "Global": {
        "Id": "92b75f99..."
      },
      "RichTextEditor": {
        "Plugins": ["textcolor"]
      }
    }
  }

Copy Link

milkman matty 31 posts 125 karma points

Oct 29, 2021 @ 11:55

Hi ShannonC,

I wrote a blog post about this, but the tl;dr is this:

"RichTextEditor": {
  "Commands": [
    {
      "alias": "forecolor",
      "name": "Change Color",
      "mode": "Selection"
    },
    {
      "alias": "fontselect",
      "name": "Change Font Family",
      "mode": "Selection"
    },
    {
      "alias": "fontsizeselect",
      "name": "Change Font Size",
      "mode": "Selection"
    }
  ],
  "Plugins": [
    "textcolor",
    "colorpicker"
  ]
}

This will give you access to font colour, font size and font type.

Copy Link

ShannonC 6 posts 78 karma points

Nov 18, 2021 @ 18:24

Thank you very much for this. Working on adding specific colors now, will update with progress.

Copy Link

Kerox 2 posts 84 karma points

May 11, 2022 @ 14:45

Hello, have you managed to add custom colors to the RTE? I can't find anything related to this for Umbraco 9, thanks!

Edit: I got it to work, this is the syntax:

"RichTextEditor": {
    "CustomConfig": {
              "textcolor_map": "[ \"000000\", \"Black\", \"e31c79\", \"Pink\" ]"
            }
 }

So basically the array must be in quotes and the values escaped.

Copy Link

Craig100 1136 posts 2523 karma points c-trib

Apr 03, 2023 @ 10:02

I have this in my appsettings.json but only see the ordinary colour picker under the Text Colour changer. I don't see my custom colours. In fact I'd prefer it if we could see ONLY the custom colours.

"RichTextEditor": {
        "Commands": [
          {
            "alias": "forecolor",
            "name": "Change Colour",
            "mode": "Selection"
          },
          {
            "alias": "fontselect",
            "name": "Change Font Family",
            "mode": "Selection"
          },
          {
            "alias": "fontsizeselect",
            "name": "Change Font Size",
            "mode": "Selection"
          }
        ],
        "CustomConfig": {
          "entity_encoding": "raw",
          "textcolor_map": "[ \"000000\", \"Black\", \"a4b69c\", \"Green\" ]"
        },
        "InvalidElements": "",
        "Plugins": [
          "textcolor",
          "colorpicker"
        ],
        "ValidElements": "*[*]"
      }

Any advice appreciated :)

Copy Link

Huw Reddick 1737 posts 6098 karma points MVP c-trib

Apr 03, 2023 @ 11:06

mmm, that works for me

enter image description here

Copy Link

David Armitage 505 posts 2073 karma points

May 16, 2023 @ 07:29

Hi All,

Just opening this ticket back up for Umbraco 11. Some of this stuff does not seem to be working for that version.

-. The colour picker still works. But I cant get the colours to show using the textcolor_map.

-. The fontsize no longer works but I managed to check the TinyMCE documentation. The alias has changed to....

 {
            "alias": "fontsize",
            "name": "Font Size",
            "mode": "Selection"
          }

With that said though I have no idea how to set the font sizes. Anything I have found does not work which makes this pretty useless.

-. The font family just doesn't work. I checked the TinyMCE docs and it looks like the commend alias is slightly different but that still didn't seem to work

I assume I would still then have the same issues with the CustomConfig trying to set the available fonts.

Has anyone got this to work in Umbraco 11 and can you share your config? I am looking to get Colour, Font Size, font Family working with pre-configured values for each.

https://www.tiny.cloud/docs/advanced/editor-command-identifiers/#executablecommands

 "RichTextEditor": {
        "Commands": [
          {
            "alias": "forecolor",
            "name": "Change Color",
            "mode": "Selection"
          },
          {
            "alias": "fontsize",
            "name": "Font Size",
            "mode": "Selection"
          }
        ],
        "CustomConfig": {
          "entity_encoding": "raw",
          "textcolor_map": "[ \"000000\", \"Black\", \"a4b69c\", \"Green\" ]"
        },
        "InvalidElements": "",
        "Plugins": [
          "textcolor",
          "colorpicker"
        ],
        "ValidElements": "*[*]"
      },

Copy Link

Huw Reddick 1737 posts 6098 karma points MVP c-trib

May 16, 2023 @ 11:35

I have not tried in 11 but I have this working ok in 10.5

      "RichTextEditor": {
    "Commands": [
      {
        "Alias": "codesample",
        "Name": "Code Sample",
        "Mode": "Insert"
      },
      {
        "Alias": "emoticons",
        "Name": "Emoticons",
        "Mode": "Insert"
      },
      {
        "Alias": "forecolor",
        "Name": "Change Color",
        "mode": "Selection"
      },
      {
        "Alias": "fontselect",
        "Name": "Change Font Family",
        "Mode": "Selection"
      },
      {
        "Alias": "fontsizeselect",
        "Name": "Change Font Size",
        "Mode": "Selection"
      }
    ],
    "Plugins": [
      "codesample",
      "emoticons",
      "textcolor",
      "colorpicker"
    ],
    "CustomConfig": {
      "textcolor_map": "[ \"000000\", \"Black\", \"a4b69c\", \"Green\" ]"
    }
  },

Copy Link

D1835 7 posts 77 karma points

Feb 15, 2024 @ 10:22

Does anyone know how to get the textcolor_map working as of today? I have tried all the above and the colors don't show up, I just get the default ones

Copy Link

is working on a reply...

Flag this post as spam?

Add Text color to TinyMce Rich Text Editor in Umbraco 9?