Javascript CkEditor-从AJAX加载的模板

我正在使用CkEditor，并希望定义一个自定义模板，该模板使用AJAX函数加载HTML字符串。我已经能够定义自定义模板，但是如果我对模板对象的html属性使用函数，则永远不会执行该函数。是否可以使用带有默认模板插件的AJAX加载模板，或者我需要自己编写模板

config.js custom.js（定义我的自定义模板）

CKEDITOR.addTemplates（'default'{
imagesPath:CKEDITOR.getUrl（CKEDITOR.plugins.getPath（'templates'）+'templates/images/'），
模板：[
{
标题：“模板1”，
图像：“template1.gif”，
描述：“无法使用的自定义模板”，
html:function（）{
警报（“从未调用此警报”）；
var html=''；
$.ajax({
url:'MyGetURL'，
键入：“获取”，
async:false，
成功：功能（结果）{
html=结果；
},
错误：函数（jqXhr、textStatus、errorshown）{
警报（“错误”“+jqXhr.status+”（文本状态：“+textStatus+”，错误抛出：“+Error抛出+”））；
}
});
返回html；
}
},
{
标题：“模板2”，
图像：“template2.gif”，
描述：“工作自定义模板”，
html：“我工作！”
}
]
});

你不能这样做。第一个原因是编辑器希望

html

是字符串，而不是函数。第二个原因是AJAX请求没有意义，因为它是异步调用的，

return html

在请求完成之前执行

不管怎样，您要做的是在编辑器准备就绪后预加载您的太阳穴。您可以使用jQuery代码简单地更改以下XHR请求，但必须记住，您应该在

success

callback中调用

CKEDITOR.addTemplates

：

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();
        }
    }
});

如果您真的想实时执行此操作（很难，我不建议您这么做），您应该使用加载自定义模板的代码覆盖

模板

命令，然后执行真正的命令。不过我觉得你不需要这么做

---

玩得开心

如果您不介意使用坏的

async:false

属性，我将自定义配置文件更改为：

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

其中，服务器循环遍历所有模板，并生成一个json编码的数组，如

templates

所示

如果不将async设置为false（因为它在较新的jQuery中是独立的），那么问题在于编辑器将在数组到达之前尝试访问它，在这种情况下，我认为您必须编辑内部文件

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();
        }
    }
});

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