TinyMCE color_map with classes

Question

I would like to ask you, if is there a way how to setup TinyMCE color pallete with classes. I've found a solution with predefined hex colors, but it's not what I want:

    color_map: [
        '#1f478f', 'Primary',
        '#DF271F', 'Secondary',
        '#000000', 'Black',
        '#ffffff', 'White'
    ],

When I apply color, it looks like this:

<p><span style="color: #df271f;">Hello, World!</span></p>

I am using Tailwind CSS and I define my colors with text-primary-500, text-secondary-400 etc. So my goal is to push those classes to tinyMCE, no matter what colors are defined with them and get results similar to this:

<p class="text-primary-500">Hello, World!</p>

or

<p><span class="text-primary-500">Hello, World!<span></p>

So whenever I change class text-xxx-xxx, it changes in TinyMCE as well. Here is my JSFiddle. Thank you guys for any advice.

Answer 1

You can use predefined TailwindCSS colors as tinyMCE colors.

As you want to configure your colors in JS, you will need your Tailwind colors as JSON rather than class names. To get them you need to implement this code:

import resolveConfig from "tailwindcss/resolveConfig";
import tailwindConfig from "path/to/tailwind.config.js";

var colors = resolveConfig(tailwindConfig).theme.colors;

More on that here.

You can then use the JS Variables colors.primary, colors.secondary etc. in your tinyMCE config:

color_map: [
        colors.primary, 'Primary',
        ...
],

Now, when you change your Tailwind Configuration, the colors in tinyMCE will change accordingly.

Answer 2

What you want to do isn't possible with the forecolor or backcolor options.

The values provided will be copied to the style attribute, so are hardcoded in the content. (Even if you provide a css variable to set the color, you will end up with a hardcoded RGB-value).

If you do want to apply a class, so that you can can change the styling of the colors afterwards, you sadly need to do this with style_formats.

For example:

style_formats: [
  {title: 'Primary text', inline: 'span', classes: "text-primary"},
  ...
]

Will generate a <span class="text-primary"></span> in tinymce's output.

You could still generate these options with Tailwind's resolveConfig as outlined in p.loeffler's answer.

I've edited your JSFiddle to show that this works: https://jsfiddle.net/87zsgpwv/7/