Placeholder plugin for Redactor 8.2.6

Example

Redactor version: 8.2.6

This example has predefined HTML content with placeholders.

Text inside double curly brackets are transformed to a placeholder {{user_name}} to User name

Usage

1. Include redactor_placeholder.js somewhere after redactor.js.
2. Include redactor_placeholder.css, or copy styles to your stylesheet. This just creates the toolbar icon, and styles the placeholder spans.
3. Add placeholders data with an array of object [{name: '', value: ''}, ...] to your textarea
4. Add placeholders plugin to your redactor instance.

See the example below:

// Placeholder object
var placeholders = [
    {
        "name": "user_name", // Placeholder's id.
        "value": "User name" // Placeholder's name, visible to user.
    },
    ...
];

// Attach placeholder to textareas, before redactor init.
$('#redactor').data('placeholders', placeholders);

// Init redactor with placeholder plugin.
$('#redactor').redactor({
    plugins: ['placeholders']
});

Transform placeholders to text

Sadly Redactor has no beforeSave callback, therefore you have to transform the placeholder spans back to text manually by calling the plugin's getTransformedHtml method. See the example below:

$('#redactor').data('redactor').getTransformedHtml();

Issues

• Sometimes it puts the placeholder to the very beginning of the text.
  Thats because of Redactor forgets the last cursor position after blur.