CkEditor - 从 AJAX 加载的模板答案

【问题标题】：CkEditor - Template loaded from AJAXCkEditor - 从 AJAX 加载的模板
【发布时间】：2014-04-07 19:17:09
【问题描述】：

我正在使用 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>'
        }
    ]
});

【问题讨论】：

标签： javascript ajax ckeditor

【解决方案1】：

你不能这样。第一个原因是编辑器期望html 是一个字符串，而不是一个函数。第二个原因是您的 AJAX 请求没有意义，因为它是异步调用的，并且在请求完成之前会执行 return html。

无论如何，您要做的是在编辑器准备好后预加载您的寺庙。您可以简单地使用 jQuery 代码更改以下 XHR 请求，但您必须记住，您应该在 success 回调中调用 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();
        }
    }
});

如果您真的想实时执行此操作（很难，我不推荐给您），您应该使用加载自定义模板然后执行实际命令的代码覆盖 templates 命令。不过我认为你不需要这样做。

玩得开心！

【讨论】：

【解决方案2】：

如果您可以使用错误的 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 中已被弃用），问题将是编辑器会在数组到达之前尝试访问它，在这种情况下，我认为您必须编辑内部文件。

【讨论】：