[Plone 5] TinyMCE Text Color Picker Palette Customizing

Plone Support Customizing Plone
,
1

I'm trying to load our corporate palette into the text colour picker in TinyMCE on a Pone 5.1.6 site.

I've added the text colour pickers to the TinyMCE menu by ticking the "textcolor" and "colorpicker" checkboxes under Site Setup > TinyMCE > Plugins and Toolbar > Editor Plugins, and then adding "| forecolor backcolor" to Site Setup > TinyMCE > Plugins and Toolbar > Toolbar. This worked fine.

Looking at this page of the TinyMCE docs:

https://www.tiny.cloud/docs/configure/content-appearance/#text_color

I then tried adding the following to Site Setup > TinyMCE > Advanced > Other Settings:

{
 "color-map": [
  "78BE20", "Green",
  "63666A", "Gray",
  "D5CB9F", "Cream",
  "971B2F", "Red",
  "ED8B00", "Orange",
  "EAAA00", "Yellow",
  "009CA6", "Cyan",
  "003087", "Blue"
 ]
}

I altered the format slightly from what appears in the TinyMCE docs (basically just putting color-map in quotes) so that Plone would accept it as valid JSON.

In any case, that didn't produce any change in the colour picker at all.

I feel like this is a small formatting error, but I've fiddled with it a fair bit with no luck. Any idea what I'm doing wrong?

2

Alternately, the textcolor plugin javascript file is at:

http://hostname:8080/Site/++plone++static/components/tinymce-builded/js/tinymce/plugins/textcolor/plugin.js

...and I can see the colour map in there.

I've tried using Site Setup > Resource Registries > Overrides to customize that version of the colour map as a sort-of-hacky solution, but I can't figure out how to make it take effect.

After making my changes, I click "Save", but even though it now shows up in the list as "Customized", if I load another file and then go back to that file, my changes aren't there. Going to the "Registry" tab and setting the site to Development Mode, clicking Develop JavaScript on the Plone-Logged-In bundle (which appears to be the bundle which includes that resource) doesn't seem to help, nor does re-building that bundle. Going back to "Overrides" and selecting the resource in question always shows the original version without my customizations, and there are no changes in the site.

3

A quick look at the link you pasted and the syntax looks like that, but is it not a bit strange with just comma between everything?

I would assume that

 "78BE20", "Green", "63666A", "Gray",

Means that green=#78be20 and gray=#63666A . IF so, should they not be 'grouped together somehow'

PS: It might be worth trying the colors with and without #

4

I agree that it seems weird with them not being an array of tuples or an array of two-element arrays or something, but if you look at the actual JavaScript for the plugin, it's arranged the same way there:

var defaultColorMap = [
    '000000',
    'Black',
    '993300',
    'Burnt orange',
    '333300',
    'Dark olive',
    '003300',
    'Dark green',
    '003366',
    'Dark azure',
    '000080',
    'Navy Blue',
    '333399',
    'Indigo',
    '333333',
    'Very dark gray',
    '800000',
    'Maroon',
    'FF6600',
    'Orange',
    '808000',
    'Olive',
    '008000',
    'Green',
    '008080',
    'Teal',
    '0000FF',
    'Blue',
    '666699',
    'Grayish blue',
    '808080',
    'Gray',
    'FF0000',
    'Red',
    'FF9900',
    'Amber',
    '99CC00',
    'Yellow green',
    '339966',
    'Sea green',
    '33CCCC',
    'Turquoise',
    '3366FF',
    'Royal blue',
    '800080',
    'Purple',
    '999999',
    'Medium gray',
    'FF00FF',
    'Magenta',
    'FFCC00',
    'Gold',
    'FFFF00',
    'Yellow',
    '00FF00',
    'Lime',
    '00FFFF',
    'Aqua',
    '00CCFF',
    'Sky blue',
    '993366',
    'Red violet',
    'FFFFFF',
    'White',
    'FF99CC',
    'Pink',
    'FFCC99',
    'Peach',
    'FFFF99',
    'Light yellow',
    'CCFFCC',
    'Pale green',
    'CCFFFF',
    'Pale cyan',
    '99CCFF',
    'Light sky blue',
    'CC99FF',
    'Plum'
  ];

When it parses the colour map, it increments by 2 and processes two elements of the array at a time:

var mapColors = function (colorMap) {
    var i;
    var colors = [];
    for (i = 0; i < colorMap.length; i += 2) {
      colors.push({
        text: colorMap[i + 1],
        color: '#' + colorMap[i]
      });
    }
    return colors;
  };

If you add the # before the colours, Plone rejects it as invalid JSON. (I initially had it in there. Also, you can see the line in the JavaScript above where it prepends the # to the colour values in the array.)

What I've been trying to do in the meantime is go into the resource registry and modify the default colourmap declaration above. However, when I save it, it doesn't seem to "take". Oddly, if I go into the ZMI, my modifications show up under Plone > portal_resources > resource_overrides > static > components > tinymce-builded > js > tinymce > plugins > textcolor > plugin.js. So it's being "saved" in some sense. But if I go back to Site Setup > Resource Registries > Overrides and pick the javascript file, it shows the original code, and building the logged-in bundle results in the original variable declaration being in the compiled code, not my modified version. :confused: