CkEditor - Template downloaded from AJAX

Question

I am using CkEditor and would like to define a custom template that uses the AJAX function to load an HTML string. I was able to define custom templates, but if I use a function for the html property of a template object, the function will never be explicated. Is it possible to load a template using AJAX using 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 cannot follow this path. The first reason is because the editor expects html be a string, not a function. The second reason is because your AJAX request does not make sense, as it is called asynchronously, and return html is executed until the request completes.

In any case, what you want to do is preload your temple (s) as soon as the editor is ready. You can simply modify the following XHR request with jQuery code, but you must remember that you must call CKEDITOR.addTemplates in the 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 it live (difficult, I do not recommend it to you), you should rewrite the 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.

Good luck

Answer 2

If you use the bad async: false attribute, I solved this by changing my configuration file:

 $.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!"); } }); 

If the server goes through all the templates and generates a json-encoded array, as templates should be.

If you do not set async to false (since it is disabled in the new jQuery), the problem will be that the editor will try to access the array before it appears. In this case, I think you will have to edit the internal files.