CKeditor使用Ajax填充对话框选择

时间:2014-07-08 13:46:14

标签: javascript jquery ajax ckeditor

我正在尝试用ajax填充我的CKeditor对话框选择框。以下是我的plugin.js文件:

...
{
    type : 'select',
    id : 'style',
    label : 'Style',
    setup : CKEDITOR.ajax.post(  '.../ckeditor/plugins/simpleLink/ajax.php', JSON.stringify( { foo: 'bar' } ), 'application/json', function( data ) { 
            console.log( data);
    }),
    items : [ ['--- Select something ---', 0] ],
    commit : function( data )
    {
        data.style = this.getValue();
    }
}
...

ajax输出如下所示:

["Basketball","basketball"],["Baseball","baseball"],["Hockey","hockey"]

我真的很想知道如何将输出输入"项目"。从我的角度来看,我尝试了一切。 有人能帮助我吗?

2 个答案:

答案 0 :(得分:1)

找到了解决方法。对于任何有同样问题的人 - 这是我解决问题的方法:

plugin.js:

“CKEDITOR.plugins.add”之前的代码('PLUGINNAME',{...“

jQuery.extend({
getValues: function(url) {
    var result = null;
    $.ajax({
        url: url,
        type: 'get',
        dataType: 'json',
        async: false,
        success: function(data) {
            result = data;
        }
    });
   return result;
}
});
var results = $.getValues('.../ckeditor/plugins/PLUGINNAME/ajax.php');

这是选择框的代码

{
    type : 'select',
    id : 'style',
    label : 'Style',
    setup : '',
    items : results,
    commit : function( data )
    {
        data.style = this.getValue();
    }
}

答案 1 :(得分:0)

CKEditor选择小部件具有一个“添加”功能,您可以调用该功能来填充它们。如果添加一个,可以从“ onLoad”函数调用它:

{
    type: 'select',
    id: 'myselect',
    label: 'The select will be empty until it is populated',
    items: [ ],
    onLoad: function(api) {
        widget = this;
        $.ajax({
            type: 'GET',
            url: 'path/to/your/json',
            dataType: 'json',
            success: function(data, textStatus, jqXHR) {
                for (var i = 0; i < data.length; i++) {
                    widget.add(data[i]['label'], data[i]['value']);
                }
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.log('ajax error ' + textStatus + ' ' + errorThrown);
            },
        });
    },
},
相关问题