Wygwam - Creating a custom template

Question

I'm using ExpressionEngine v2.7.2 and Wygwam v3.2.2 and I want to be able to add a custom template to the toolbar, to be able to add custom markup.

I've looked at the documentation for both CKEditor and Wygwam, but it's so confusing.

I see that under third-party/wygwam/ckeditor/plugins/templates/ there are two folders, dialogs and templates. And it looks like the folder templates is the one that is the default one. What are the steps I need to go from here?

In my Wygwam configuration in Expression Engine CP, I can add Advanced Settings. But should I choose templates or templates_files? If I choose template_files, this is filled out by default: plugins/templates/templates/default.js

This I reckon is the file from third-party/wygwam/ckeditor/plugings/templates/? Would that mean that I can just add plugins/templates/myCustomTemplate/default.js

I have already tried that and it comes up blank when I click the button in the wygwam editor. This is really confusing, any pointers?

Answer 1

Really good video on using templates in wygwam here How to use the Templates button in Wygwam for ExpressionEngine

Answer 2

You should define your custom templates in it's own file outside of Wygwam.

e.g. /assets/wysiwyg/wysiwyg-templates.js

// Register a template definition set named "default".
CKEDITOR.addTemplates( 'default',
{
    // The name of the subfolder that contains the preview images of the templates.
    imagesPath : '/assets/wysiwyg/images/',

    // Template definitions.
    templates :[
        {
            title: 'Callout - Blue Background',
            image: 'callout-blue.png',
            html:
                '<div class="callout-blue"><p></p></div>' +
                '<p></p>'
        },
        {
            title: 'Custom - List Item',
            image: 'custom-list-item.png',
            html:
                '<p class="custom-li"><span class="key">1.</span> Lorem ipsum</p>' +
                '<p></p>'
        },
        {
            title: 'Styled Link List',
            image: 'link-list.png',
            html:
                '<ul class="link-callout"><li></li></ul>' +
                '<p></p>'
        },
    ]
});

Then in the EE control panel go to the Wygwam module, edit your configuration and add an advanced setting for template_files and set it to the path you used above (e.g. /assets/wysiwyg/wysiwyg-templates.js).