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

Hi, [% name %],
Hearts of the stars [% email %] something incredible is waiting to be known corpus callosum rich in mystery two ghostly white
 figures in coveralls and helmets are soflty dancing a very small stage in a vast cosmic arena. Are creatures of the cosmos across the centuries courage of our questions inconspicuous motes of rock and gas hundreds of thousands Orion's sword.
<figure>
 <img src="/assets/img/article/demo-image.jpg" alt="Snow mountain under starts" width="2000" height="1334" />
 <figcaption>Benjamin Voros <a href="https://unsplash.com/photos/phIFdC6lA4E">unsplash.com</a></figcaption>
</figure>
Star stuff harvesting star light kindling the energy hidden in matter a mote of dust suspended in a sunbeam bits of moving fluff another world brain is the seed of intelligence. Take root and flourish kindling the energy hidden in matter the carbon in our apple pies kindling the energy hidden in matter citizens of distant epochs bits of moving fluff.

Code

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

        <!-- css -->
        <link rel="stylesheet" href="/your-article-dist-path/article-editor.css" />
    </head>
    <body>
        <!-- element -->
        <textarea id="entry">
            <p>Hi, [% name %],</p>
            <p>Hearts of the stars [% email %] something incredible...</p>
        </textarea>

        <!-- js -->
        <script src="/your-article-dist-path/article-editor.js"></script>
        <script src="/your-article-dist-path/plugins/variable.js"></script>

        <!-- call -->
        <script>
        ArticleEditor('#entry', {
            plugins: ['variable'],
            css: '/your-article-dist-path/'
        });
        </script>
    </body>
</html>

Usage

The plugin replaces specially marked variables with visual elements in the editor.

By default, the variable template is: [% variable %], so in content, it should look like this:

<p>Hi, [% name %],<br>
    and your email is: [% email %]
</p>

When you start Article Editor, all of these variables will be replaced with visual elements so that they can be manipulated.

You can change the default template of variables with this setting:

ArticleEditor('#entry', {
    plugins: ['variable'],
    css: '/your-article-dist-path/',
    variable: {
        template: {
            start: '{{ ',
            end: ' }}'
        }
    }
});

Now the variables in the content can be like this:

<p>
    Hi, {{ name }},<br>
    and your email is: {{ email }}
</p>

By default, the variable popup has the following items:

'email', 'name', 'password'

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

ArticleEditor('#entry', {
    plugins: ['variable'],
    css: '/your-article-dist-path/'
    variable: {
        items: ['email', 'name', 'password', 'lastname', 'country', 'city', 'whatever']
    }
});

Variable

Code

Usage