Merge Tag

Click on an editable block and then on the mergetag icon on the toolbar. Choose a mergetag from the shown popup and insert it.

Code

<!DOCTYPE html>
<html>
    <head>
        <title>Redactor</title>
        <meta charset="utf-8">

        <!-- css -->
        <link rel="stylesheet" href="/your-folder/redactor.css" />
    </head>
    <body>
        <!-- element -->
        <textarea id="entry">...</textarea>

        <!-- js -->
        <script src="/your-folder/redactor.js"></script>
        <script src="/your-folder/plugins/mergetag/mergetag.js"></script>

        <!-- call -->
        <script>
        Redactor('#entry', {
            plugins: ['mergetag'],
            mergetag: {
                items: ['Email', 'Name', 'Password', 'Lastname', 'Country', 'City', 'Whatever']
            }
        });
        </script>
    </body>
</html>

Usage

The plugin replaces specially marked merge tags with visual elements in the editor. If your content contains code like below. Then span tags with data attribute 'mergetag' will be visual variables in the editor.


<p>
    Hi, <span data-block="mergetag">Name</span>,<br>
    and your email is: <span data-block="mergetag">Email</span>.
</p>

By default, the merge tag popup has the following items:


['Email', 'Name', 'Lastname']

This is easy to change by specifying the settings when starting the editor:


Redactor('#entry', {
    plugins: ['mergetag'],
    mergetag: {
        items: ['Email', 'Name', 'Password', 'Lastname', 'Country', 'City', 'Whatever']
    }
});

Optionally you can enable the context bar in the editor. In this case, when you click on a merge tag element, a pop-up toolbar will appear to control the merge tag.


Redactor('#entry', {
    context: true,
    plugins: ['mergetag'],
    mergetag: {
        items: ['Email', 'Name', 'Password', 'Lastname', 'Country', 'City', 'Whatever']
    }
});