enabling a limited font color picker in rich text editor

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

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

mizzle 90 posts 325 karma points

Dec 03, 2021 @ 17:05

0

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.

Copy Link
Marc Goodson 2157 posts 14431 karma points MVP 9x c-trib

Dec 11, 2021 @ 08:23

0

Hi mizzle

How have you set things up so far?

With the TinyMce ColorPicker plugin? https://www.tiny.cloud/docs-4x/plugins/colorpicker/

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:

https://www.tiny.cloud/docs-4x/plugins/textcolor/

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!)

regards

Marc

Copy Link
mizzle 90 posts 325 karma points

Dec 13, 2021 @ 14:28
0
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"
  ]
</config>
```
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!
Copy Link
Bjarne Fyrstenborg 1285 posts 4039 karma points MVP 8x c-trib

Feb 01, 2022 @ 15:10

0

I just want to mention you need to enabled textcolor plugin as well to get the forecolor (text color) option in richtext editor: https://our.umbraco.com/forum/umbraco-7/using-umbraco-7/49556-TinyMCE-and-forecolor-text-color-picker

I was looking at the previous in v7 and now v8, but it is a similar configuration in v9 (although JSON instead of XML): https://our.umbraco.com/forum/umbraco-9/106934-add-text-color-to-tinymce-rich-text-editor-in-umbraco-9

Copy Link
mizzle 90 posts 325 karma points

Feb 01, 2022 @ 15:25

0

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.

Copy Link
Bjarne Fyrstenborg 1285 posts 4039 karma points MVP 8x c-trib

Feb 01, 2022 @ 17:36
0
Yeah, it seems custom_colors options is new in TinyMCE v5: https://www.tiny.cloud/docs/migration-from-4x/

Umbraco still use TinyMCE v4: https://github.com/umbraco/Umbraco-CMS/blob/v9/contrib/src/Umbraco.Web.UI.Client/package.json#L51

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.
Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?