Menu
Redactor

Examples

Templates for email

In Redactor, you can insert pre-made email templates into your content. You can do this with the Templates plugin. See its page for a detailed description of how it works.

Click the 'Templates' button on the toolbar to open the templates modal.

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" placeholder="Add your template here..">...</textarea>

        <!-- js -->
        <script src="/your-folder/redactor.js"></script>
        <script src="/your-folder/plugins/templates/templates.js"></script>

        <!-- call -->
        <script>
        Redactor('#entry', {
            plugins: ['email', 'blockcolor', 'blockbackground', 'blockborder', 'blockfontsize',
                    'imageresize', 'alignment', 'emoji', 'templates'],
            templates: '/your-folder/email-templates.json',
            pathbar: true,
            image: {
                width: true
            }
        });
        </script>
    </body>
</html>

// example of 'email-templates.json'
{
    "digest": {
        "name": "Digest",
        "image": "/your-folder-to-thumbs/1-digest.jpg",
        "html": "..."
    },
    "shop": {
        "name": "Shop",
        "image": "/your-folder-to-thumbs/thumbs/2-shop.jpg",
        "html": "..."
    },
    "invitation": {
        "name": "Invitation",
        "image": "/your-folder-to-thumbs/thumbs/3-invitation.jpg",
        "html": "..."
    },
    "receipt": {
        "name": "Receipt",
        "image": "/your-folder-to-thumbs/thumbs/4-receipt.jpg",
        "html": "..."
    },
    "welcome": {
        "name": "Welcome",
        "image": "/your-folder-to-thumbs/thumbs/5-welcome.jpg",
        "html": "..."
    }
}