Clips - Plugins - Redactor

Clips

Adds toolbar and addbar buttons for inserting predefined HTML clips. Each clip is a named entry with a title and HTML content.

Click Clips in the toolbar or addbar and pick a clip to insert at the caret. Requires items to be configured.

Load the bundle

<script src="/assets/redactor/redactor.js"></script>
<script src="/assets/redactor/plugins/clips/clips.js"></script>

Initialization

const app = Redactor('#entry', {
    plugins: ['clips'],
    clips: {
        items: {
            greeting: {
                title: 'Greeting',
                html: '<p>Hello, welcome!</p>'
            },
            label: {
                title: 'Label',
                html: '<strong>Label:</strong>'
            }
        }
    }
});

Options

items (object | false)
- default false
- Clip map keyed by id. Each entry: { title: string, html: string }. The plugin is inactive when false.
context (boolean)
- default false
- When true, adds the button to the context toolbar as well.
icon (string)
- SVG icon HTML for the toolbar and addbar buttons.

Redactor('#entry', {
    plugins: ['clips'],
    clips: {
        context: false,
        items: {
            cta: {
                title: 'Call to action',
                html: '<p><a href="#">Learn more</a></p>'
            }
        }
    }
});

Language strings

en: {
    clips: {
        clips: 'Clips'
    }
}

Events

This plugin does not emit events.

API

insert

Inserts a clip by key and closes the dropdown.

Parameters:

key (string) — clip id from items.

app.clips.insert({ key: 'greeting' });