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

<h1>Exploring the mysteries of space</h1>
<p>Space, the final frontier, stretches <span data-block="mergetag">Name</span> infinitely beyond the confines of Earth, a vast expanse of darkness speckled with stars, planets, and <b>galaxies</b>. It is a place of profound mystery and beauty, where the laws of physics manifest in ways that challenge our understanding. The cosmos is <a href="https://example/com">a cosmic dance</a> of celestial bodies moving in the silent echo of the universe, from the fiery birth of stars in nebulae to the enigmatic pull of black holes.</p>
<figure>
  <img src="/assets/redactor4/photo.jpg" alt="Blue and purple galaxy">
  <figcaption>Jeremy Thomas <a href="https://unsplash.com/photos/blue-and-purple-galaxy-digital-wallpaper-E0AHdsENmDg">unsplash.com</a></figcaption>
</figure>
<h2>Humanity's Journey Beyond Earth</h2>
<p>Exploring space has pushed humanity to its limits, revealing not just the universe's grandeur, but also the fragility of our own planet. Satellites orbiting Earth provide crucial data for communication, weather forecasting, and global positioning, while telescopes peer deep into the cosmos, uncovering the universe's age and composition. Each discovery in space leads us to new questions about our place in the universe, driving our insatiable curiosity to explore the unknown.</p>

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']
    }
});