TinyMCE

Want to give users more visual control over their content without extra complexity? TinyMCE already includes built-in tools for changing text color and background (highlight) color—you just need to enable them.

These tools are ideal for short articles, notes, or mini-blogs where users want to emphasize key ideas or improve readability.

What this enables:

• Text color selection
• Background highlight color
• A user-friendly color picker UI
• No custom plugins or UI needed

How to enable it:
Add forecolor and backcolor to the toolbar configuration.

tinymce.init({
  selector: '#editor',
  plugins: 'lists link code',
  toolbar: 'undo redo | bold italic underline | forecolor backcolor | code'
});

That’s all. TinyMCE automatically provides a color picker that works well for beginners and advanced users alike.

Why this works well:

• Quick to implement
• Low maintenance
• Improves content clarity and expression

iving users unlimited color options can quickly lead to inconsistent or hard-to-read content. TinyMCE allows you to define a custom color palette, so users stay within visual guidelines while still having creative freedom.

This is especially useful for platforms with shared feeds, collaborative writing, or brand-focused content.

Benefits of a custom color palette:

• Consistent visual style
• Better readability
• Alignment with brand colors
• Fewer design mistakes

How to define custom colors:
Use color_map to control which colors appear in the picker.

tinymce.init({
  selector: '#editor',
  plugins: 'lists link code',
  toolbar: 'undo redo | bold italic underline | forecolor backcolor | code',

  color_map: [
    '000000', 'Black',
    'FFFFFF', 'White',
    '1E293B', 'Dark Blue',
    '2563EB', 'Primary Blue',
    '16A34A', 'Green',
    'F59E0B', 'Orange',
    'DC2626', 'Red'
  ],

  color_cols: 4
});

Users will now see only these predefined colors, making content look more cohesive across the platform.

When to use this approach:

• Shared or public content feeds
• Brand-driven platforms
• Editorial or knowledge-based sites

Sometimes one color palette just isn’t enough. Text colors usually need to be dark and readable, while highlight colors should be soft and subtle. By default, TinyMCE uses the same color palette for both—but with a small customization, you can fully separate them.

By replacing the built-in color buttons with custom toolbar buttons, you gain complete control over which colors are available for text and which are used for background highlights. This approach is ideal for platforms that care about accessibility, readability, and consistent visual design.

What this approach enables:

• Dark, high-contrast colors for text
• Soft, low-saturation colors for highlights
• Full control over labels, order, and UX
• Clear separation of purpose for each color picker

How it works:
You register two custom menu buttons—one for text color and one for background color—and apply styles manually using editor commands.

tinymce.init({
  selector: '#editor',
  toolbar: 'textcolorpicker highlightpicker',
  setup: (editor) => {

    editor.ui.registry.addMenuButton('textcolorpicker', {
      text: 'Text Color',
      fetch: (callback) => {
        callback([
          { type: 'choiceitem', text: 'Black', value: '#000000' },
          { type: 'choiceitem', text: 'Blue', value: '#2563EB' },
          { type: 'choiceitem', text: 'Red', value: '#DC2626' }
        ]);
      },
      onItemAction: (api, value) => {
        editor.execCommand('ForeColor', false, value);
      }
    });

    editor.ui.registry.addMenuButton('highlightpicker', {
      text: 'Highlight',
      fetch: (callback) => {
        callback([
          { type: 'choiceitem', text: 'Yellow', value: '#FEF08A' },
          { type: 'choiceitem', text: 'Light Blue', value: '#DBEAFE' },
          { type: 'choiceitem', text: 'Light Green', value: '#DCFCE7' }
        ]);
      },
      onItemAction: (api, value) => {
        editor.execCommand('HiliteColor', false, value);
      }
    });

  }
});

When to use this approach:

• Shared or public content feeds
• Editorial or knowledge platforms
• Accessibility-focused designs
• Strict brand or design systems

Why it’s worth it:
Although this requires a bit more setup, it’s currently the only reliable way to enforce different color rules for text and highlights in TinyMCE—without confusing users or sacrificing flexibility.