Block Color

Adds a block control button with a color picker for the text color of the current block. Applies color as an inline style on the block element.

Select a block, open the control dropdown, and choose Color. Pick a swatch, enter a hex value, or remove the color to reset.

Load the bundle

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

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

input (boolean)
- default true
- When true, shows a manual hex input in the color picker.
colors (object | string[] | null)
- default null
- Preset palette for this picker. null uses the editor-wide colors option.
icon (string)
- SVG icon HTML for the block control button.

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

en: {
    blockColor: {
        color: 'Color'
    }
}

This plugin does not emit events.

Applies a text color to the current block and closes the dropdown.

Parameters:

app.blockColor.set({ color: '#e03131' });

Clears the block text color and closes the dropdown.

app.blockColor.remove();