3

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

2 に答える 2

4

この道をたどることはできません。最初の理由は、エディターhtmlが関数ではなく文字列であることを想定しているためです。return html2 つ目の理由は、AJAX リクエストが非同期で呼び出され、リクエストが完了する前に実行されるため、意味をなさないことです。

とにかく、エディタの準備ができたら、テンプルをプリロードする必要があります。CKEDITOR.addTemplates次の XHR リクエストを jQuery コードで簡単に変更できますが、successコールバックで呼び出す必要があることを覚えておく必要があります。

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カスタム テンプレートをロードして実際のコマンドを実行するコードでコマンドを上書きする必要があります。私はあなたがこれを行う必要はないと思います。

楽しむ！

于 2012-09-29T13:10:26.650 に答える
0

悪い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 では廃止されているため)、配列が到着する前にエディターが配列にアクセスしようとすることが問題になります。その場合、内部ファイルを編集する必要があると思います。

于 2014-04-07T11:17:09.933 に答える