CKEDITOR.plugins.add('tokentags', {
    // Token Tags Widget Code
    requires: 'widget',
    icons: 'tokentags',
    init: function (editor) {
        editor.addContentsCss(this.path + 'styles/tokentags.css');
        CKEDITOR.dialog.add('tokentags', this.path + 'dialogs/tokentags.js');
        editor.widgets.add('tokentags', {
            button: 'Insert Token',
            template: '<span class="tokentags-widget">{token}</span>',
            defaults: {
                token: "Header1"
            },
            draggable: false,
            allowedContent: 'span(!tokentags-widget)',
            requiredContent: 'span(tokentags-widget)',
            upcast: function (element) {
                return element.name == 'span' && element.hasClass('tokentags-widget');
            },
            dialog: 'tokentags',
            init: function () {
                this.setData('token', this.parts.span.getText() || "Header1" );
            },
            data: function () {
                this.parts.span.setText(this.data.token);
            },
            inline: true,
            parts: {
                span: 'span.tokentags-widget'
            },
            styleableElements: 'span'
        });
    },
});