Twigvariable plugin for TinyMCE

This plugin adds a button to the toolbar which opens a window and gives you the opportunity to insert a new variable in twig format. Depending on the init parameters it is possible to permanently add a prefix to each variable and/or a default value. The default value can be useful to prevent exceptions, if the variables are possibly yet unknown to your application.

Usage

• Add the plugin to tinymce inside your project with your favourite package-manager
• Move content of this repo in tinymce-subfolder: /tinymce/plugins/twigvariable
• Add "twigvariable" as new item to tinymce initialisation inside "plugins" and "toolbar" array.
• Set the optional parameters for twigvariable plugin

Installation

To install plugin with bower use command

bower install tinymce-plugin-twigvariable

To install plugin with yarn use command

yarn add tinymce-plugin-twigvariable

Initialize the plugin and the optional parameters

You can configure the plugin in the twigvariable section of the tinyMCE initialisation. If you want to pass already existent variables to the TinyMCE editor, you can render the values inside a combobox with twig for example, like shown below.

tinyMCE.init({
    plugins: 'twigvariable',
    toolbar: 'twigvariable',
    // Parameters of twigvariable plugin
    twigvariable_settings: [
        {
            default_variable_prefix: "parentObject",
            twig_filter_default_placeholder: true,
            predefined_variable_combobox: [
                {% for variable in variableArray %}
                    { text: '{{ variable.internalName }}', value: '{{ ('{{ parentObject.' ~ variable.internalName ~ '|default("{{ parentObject.' ~ variable.internalName ~ ' }}") }}')|raw }}' },
                {% endfor %}
            ]
        }
    ],
});

The example renders an array of variable names to list values for the combobox in the tinyMCE dialog. The output code is of the same format like the variables generated by manual input.