Font Color

Load the bundle

<script src="/assets/redactor/redactor.js"></script>
<script src="/assets/redactor/plugins/font-color/font-color.js"></script>

Initialization

const app = Redactor('#entry', {
    plugins: ['fontColor']
});

Options

• input (boolean)
  • default true
  • When true, shows a manual hex input in the color picker.
• colors (object | string[] | false)
  • default false
  • Preset palette for this picker. false uses the editor-wide colors option.
• classes (string[] | false)
  • default false
  • When set to a non-empty array, switches to a class-based dropdown instead of the color picker. Each entry is a CSS class name applied to a <span>.
• icon (string)
  • SVG icon HTML for the toolbar and context buttons.

Redactor('#entry', {
    plugins: ['fontColor'],
    fontColor: {
        colors: ['#000000', '#e03131', '#1971c2', '#37b24d']
    }
});

Class-based mode:

Redactor('#entry', {
    plugins: ['fontColor'],
    fontColor: {
        classes: ['text-red', 'text-blue', 'text-green']
    }
});

Language strings

en: {
    fontColor: {
        title: 'Text color',
        remove: 'Remove color',
        'text-color': 'Text color',
        background: 'Background'
    }
}

Events

This plugin does not emit events.

API

set

Applies an inline color to the current selection and closes the dropdown.

Parameters:

• color (string) — CSS color value (for example #e03131).
• target (string, optional) — 'background' for background color; omit or use any other value for text color.

app.fontColor.set({ color: '#e03131' });
app.fontColor.set({ color: '#fff3bf', target: 'background' });

remove

Clears inline text or background color from the selection and closes the dropdown.

Parameters:

• target (string, optional) — 'background' to clear background color only.

app.fontColor.remove();
app.fontColor.remove({ target: 'background' });

removeBackground

Clears inline background color from the selection. Same as remove({ target: 'background' }).

app.fontColor.removeBackground();