javascript – CkEditor – 从AJAX加载的模板

我正在使用CkEditor并且想要定义一个自定义模板,它使用AJAX函数来加载HTML字符串.我已经能够定义自定义模板,但如果我使用函数作为模板对象的html属性,则该函数永远不会被执行.是否可以使用带有默认模板插件的AJAX加载模板,还是需要自己编写？

config.js

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

custom.js(定义我的自定义模板)

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>'
        }
    ]
});

解决方法:

你不能这样做.第一个原因是编辑器希望html是一个字符串,而不是一个函数.第二个原因是你的AJAX请求没有意义,因为它是异步调用的,并且在请求完成之前返回html.

无论如何,你想要做的是在编辑器准备好之后预先加载你的太阳穴.您只需使用jQuery代码更改以下XHR请求,但您必须记住,您应该在成功回调中调用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();
        }
    }
});

如果你真的想要这样做(很难,我不推荐你),你应该用你的代码覆盖模板命令,加载自定义模板,然后执行真正的命令.我认为你不需要这样做.

玩得开心！