Create and use variables like [% username %] as noneditable things in the content.

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


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

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

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

        <!-- call -->
        ArticleEditor('#entry', {
            plugins: ['variable'],
            css: '/your-article-dist-path/'


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 %]

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:

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

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']