Protect template syntax

This example shows how to protect template syntax in the content.

When content is rendered by a template engine, you can mix ordinary HTML with engine-specific tags. Redactor protects these fragments while you edit.

Handlebars — iterate over a collection (like {{#each ... }}) and render a partial for each item:

{{>person person=.}}

Twig / Jinja — loop through navigation items (like {% for ... %}) and output links with variables:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id nisi ante. In consectetur risus vitae ligula sollicitudin auctor. Fusce maximus sagittis semper. Nulla ac neque eu quam molestie vulputate. Proin blandit lobortis dolor sit amet volutpat. Quisque eget egestas odio. Donec egestas, nisi vel ullamcorper finibus, sem dui pellentesque turpis, sit amet aliquet lectus odio a dolor.

Code

<div id="entry-template-syntax">
    <p>When content is rendered by a template engine, you can mix ordinary HTML with engine-specific tags.</p>

    <p><strong>Handlebars</strong> — iterate over a collection:</p>
    <ul>
    {{#each persons}}
        <li>{{>person person=.}}</li>
    {{/each}}
    </ul>

    <p><strong>Twig / Jinja</strong> — loop through navigation items:</p>
    <ul id="navigation">
    {% for item in navigation %}
        <li><a href=""></a></li>
    {% endfor %}
    </ul>
</div>

const app = Redactor('#entry-template-syntax', {
    templateSyntax: [
        ['{%', '%}'],
        ['{{#', '}}'],
        ['{{/', '}}']
    ]
});