Block Border

Adds a block control button for border width, color, and corner radius. Works on most block types, including images (styles are applied to the image element).

Select a block, open the control dropdown, and choose Border. Adjust width, radius, and color in the form; changes apply when you confirm.

Load the bundle

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

Initialization

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

Options

icon (string)
- SVG icon HTML for the block control button.

Redactor('#entry', {
    plugins: ['blockBorder'],
    blockBorder: {
        icon: '<svg...>'
    }
});

Language strings

en: {
    blockBorder: {
        border: "Border",
        color: "Color",
        width: "Width",
        radius: "Radius"
    }
}

Events

blockBorder:open:data

Emitted when the border form opens.

Payload: { block, data }

Return: { data } to override the initial form values.

blockBorder:save:data

Hook before border styles are saved.

Payload: { block, data, stop }

Return: { data } to modify values or call stop() to cancel.

app.on('blockBorder:open:data', ({ data }) => {
    if (!data.color) data.color = '#000000';
});

app.on('blockBorder:save:data', ({ data, stop }) => {
    if (data.width === '0') stop();
});

API

This plugin does not expose a public API.