Style a block type

This example shows how, using plugins, you can customize block styles such as background, color, border, and padding. Click on any block and then on the icon on the left to see the menu.

Code

<div id="entry-style-block"></div>

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

const app = Redactor('#entry-style-block', {
    plugins: ['blockColor', 'blockBackground', 'blockBorder', 'blockSpacing'],
    content: [
        '<p>Select a block and use the control menu on the left.</p>',
        '<p style="padding:20px;background:#fff0f6;border-radius:12px;">Styled paragraph.</p>'
    ].join('')
});