Placeholder plugin(beta) for Redactor 9.0

Example

Redactor version: 9.0.0

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_v2beta.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

1. Delete placeholder with backspace causes an error. see bugreport »

Compatibility

Works only with Redactor v9.0 (Updated: May 30, 2013)