Block Background

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

Select a block, open the control dropdown, and choose Background 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-background/block-background.js"></script>

Initialization

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

Options

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: ['blockBackground'],
    blockBackground: {
        input: false,
        colors: ['#ffffff', '#fff3bf', '#ffe066', '#ffd8a8']
    }
});

Language strings

en: {
    blockBackground: {
        "background-color": "Background color"
    }
}

Events

This plugin does not emit events.

API

set

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

Parameters:

color (string) — CSS color value (for example #fff3bf).

app.blockBackground.set({ color: '#fff3bf' });

remove

Clears the block background color and closes the dropdown.

app.blockBackground.remove();