CkEditor - Template loaded from AJAX

Question

I am using CkEditor and would like to define a custom template, that uses an AJAX function to load a HTML string. I have been able to define custom templates, but if I use a function for the html property of the template object the function is never exectuted. Is it possible to load a template using AJAX with the default template plugin or do I need to write my own?

config.js

CKEDITOR.editorConfig = function (config) {
    config.templates_files = ['/pathtomyfile/custom.js'];
};

custom.js (defining my custom templates)

CKEDITOR.addTemplates('default', {
    imagesPath: CKEDITOR.getUrl(CKEDITOR.plugins.getPath('templates') + 'templates/images/'),
    templates: [
        {
            title: 'Template 1',
            image: 'template1.gif',
            description: 'A custom template that does not work',
            html: function () {
                alert('This alert is never called');
                var html = '';

                $.ajax({
                    url: 'MyGetURL',
                    type: "GET",
                    async: false,
                    success: function (result) {
                        html = result;
                    },
                    error: function (jqXhr, textStatus, errorThrown) {
                        alert("Error '" + jqXhr.status + "' (textStatus: '" + textStatus + "', errorThrown: '" + errorThrown + "')");
                    }
                });

                return html;
            }
        },
        {
            title: 'Template 2',
            image: 'template2.gif',
            description: 'A working custom template',
            html: '<h1>I Work!</h1>'
        }
    ]
});

Answer 1

You can't follow this way. The first reason is that editor expects html to be a string, not a function. The second reason is that your AJAX request doesn't make sense since it's called asynchronously and return html is executed before the request is finished.

Anyway, what you want to do is to preload your temple(s) once the editor is ready. You can simply change the following XHR request with a jQuery code but you have to remember that you should call CKEDITOR.addTemplates in success callback:

CKEDITOR.replace( 'editor1', {
    templates: 'my',
    on: {
        instanceReady: function( argument ) {
            var httpRequest = new XMLHttpRequest();

            httpRequest.onreadystatechange = function() {
                CKEDITOR.addTemplates( 'my', {
                    templates: [
                        {
                            title: 'My AJAX-driven template',
                            html: this.responseText
                        }
                    ]
                });
            };
            httpRequest.open( 'GET', 'yourFile.html' );
            httpRequest.send();
        }
    }
});

If you really wanted to do this live (hard way, I don't recommend it to you), you should overwrite templates command with your code which loads custom templates and then executes the real command. I don't think you need to do this though.

Have fun!

Answer 2

If you're okay with using the bad async: false attribute, I've solved this by changing my custom config file to this:

$.ajax({
    type: "POST",
    url: '/editor/getTemplates',
    async: false,
    dataType: "json",
    success: function(data) {


        CKEDITOR.addTemplates("default",{
        imagesPath:CKEDITOR.getUrl(CKEDITOR.plugins.getPath("templates")+
       "templates/images/"),
        templates:data});


    },
    error: function() {
        alert("Error!");
    }
});

Where the server loops through all templates and generates a json encoded array as templates should be.

If you don't set async to false (since it's depercated in newer jQuery), the problem will be that the editor will try to access the array before it arrived, In that case I think you'd have to edit internal files.