构建CKEditor插件时如何添加动态数据？

Question

现在，我正在使用JS调用REST API并获得结果“ WPTList”。 我已经编写了CKEditor插件的硬编码版本，现在我想将下拉列表的填充设置为API返回结果“ WPTList”的值。 如何将它们结合在一起？

1，这是硬编码版本，效果很好。 我想改变项目。

CKEDITOR.dialog.add( 'EPWebPart', function( editor ) {
return {
    title: 'Find and Select WebPart',
    minWidth: 400,
    minHeight: 200,
    contents: [
        {
            id: 'tab-basic',
            label: 'Basic Settings',
            elements: [
                        {
                            type: 'select',
                            id: 'WebPartId',
                            label: 'WebPart Id',
                            //Now I hardcoded the items.
                            items: [    [ 'Account Home : WPT-10000655','WPT-10000655' ],
                                        [ 'Account Summary : WPT-10000127','WPT-10000127' ],
                                        [ 'Back Order Summary : WPT-10000609','WPT-10000609' ],
                                        [ 'Bulk Order : WPT-10000708','WPT-10000708' ],
                                        [ 'Check Price And Availability Single: WPT-10000401','WPT-10000401' ],
                                        [ 'Check Price and Availability Multi: WPT-10000798','WPT-10000798' ],
                                        [ 'Contact Form : WPT-10000688','WPT-10000688' ],
                                        [ 'EASYCommerce Item Catalog : WPT-10000656','WPT-10000656' ],
                                        [ 'Find And Track Orders : WPT-10000267','WPT-10000267' ]],
                            validate: CKEDITOR.dialog.validate.notEmpty( "WebPart Id field cannot be empty." )
                        }
    ]
        },
        {
            id: 'tab-adv',
            label: 'Advanced Settings',
            elements: [
                // UI elements of the second tab will be defined here.
            ]
        }
    ],
    onOk: function() {
        var dialog = this;
        var abbr = editor.document.createElement( 'krise:KView' );

        abbr.setAttribute( 'runat', 'server');
        abbr.setAttribute( 'ID', dialog.getValueOf( 'tab-basic', 'WebPartId' ).replace('-','') );
        abbr.setAttribute( 'WebPartId', dialog.getValueOf( 'tab-basic', 'WebPartId' ) );
        abbr.setText( dialog.getValueOf( 'tab-basic', 'WebPartId' ) );
        editor.insertElement( abbr );
        //editor.insertHtml( '<h2>This is a sample header</h2><p>This is a sample paragraph.</p>' );
    }
};
});

2，这是我调用的API，结果是WPTList。

function generateList(target, responseData){
        var obj = JSON.parse(responseData);
        //WPTList is the result.
        WPTList = obj.ListWPT.Output.List;
        document.getElementById('show').value = WPTList;
    }
    function myFunction(){
        var queryString = '';
        var res = CallRestAPI(event, 'ListWPT', 'GET', 'JSON', queryString, generateList);
    }

    function getWindowURL(){
        var path = window.location.pathname.split('/');
        if (path[path.length-1].indexOf('.aspx')>-1) {
            path.length = path.length - 1;
        }
        if (path[path.length-1].indexOf('.html')>-1) {
            path.length = path.length - 1;
        }
        //var app = path[path.length-2]; // if you just want 'three'
        var app = path.join('/'); //  if you want the whole thing like '/one/two/three'
        if (app != "") app = app + "/";
        return window.location.protocol + "//" + window.location.host + "/" + app;
    }

    function setHttpRequest(){
        try{
            xmlHttp = new XMLHttpRequest();
        }
        catch(e){
            try{
                xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

            }
            catch(e){
                try{

                    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                }
                catch(e){
                    alert("Your browser does not support AJAX!");
                    xmlHttp = null;
                }
            }           
        }
    }

    function CallRestAPI(event, APIName, Verb, XMLorJSON, inputData, callback){
        var windowURL = getWindowURL();
        var target;
        if(event){
            target = event.target?event.target:event.srcElement;
        }
        rendering = true;
        setHttpRequest();
        xmlHttp.onreadystatechange=function(){
            if(xmlHttp.readyState==4){
                if(callback){
                    callback(target, xmlHttp.responseText);
                    rendering = false;
                }
            }
        }
        var url;
        if(Verb == "GET"){
            url = windowURL + "REST/" + XMLorJSON + "/" + APIName + '?' + inputData;
            xmlHttp.open("GET",url,true);
            xmlHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            xmlHttp.send();
        }else if(Verb == "POST"){
            var APIKey = getCookie('APIKey');
            url = windowURL + "REST/" + XMLorJSON + "/" + APIName;
            var postData = 'Input='+encodeURIComponent(inputData); //'Input=' + inputData;
            xmlHttp.open("POST",url,true);
            xmlHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            xmlHttp.setRequestHeader('Key', APIKey);
            xmlHttp.send(postData);
        }
        return false;
    }

3，我试图通过这种方式将它们组合在一起，但是它不起作用，列表为空。

    function generateList(target, responseData){
            var obj = JSON.parse(responseData);
            WPTList = obj.ListWPT.Output.List;


            CKEDITOR.dialog.add( 'EPWebPart', function( editor ) {
    return {
        title: 'Find and Select WebPart',
        minWidth: 400,
        minHeight: 200,
        contents: [

            {
                id: 'tab-basic',
                label: 'Basic Settings',
                elements: [
                            {
                                type: 'select',
                                id: 'WebPartId',
                                label: 'WebPart Id',
                                items: [WPTList],
                                validate: CKEDITOR.dialog.validate.notEmpty( "WebPart Id field cannot be empty." )
                            }
        ]
            },
            {
                id: 'tab-adv',
                label: 'Advanced Settings',
                elements: [
                    // UI elements of the second tab will be defined here.
                ]
            }
        ],
        onOk: function() {
            var dialog = this;
            var abbr = editor.document.createElement( 'krise:KView' );

            abbr.setAttribute( 'runat', 'server');
            abbr.setAttribute( 'ID', dialog.getValueOf( 'tab-basic', 'WebPartId' ).replace('-','') );
            abbr.setAttribute( 'WebPartId', dialog.getValueOf( 'tab-basic', 'WebPartId' ) );
            abbr.setText( dialog.getValueOf( 'tab-basic', 'WebPartId' ) );
            editor.insertElement( abbr );
            //editor.insertHtml( '<h2>This is a sample header</h2><p>This is a sample paragraph.</p>' );
        }
    };
});
            }

function CallRestAPI(event, APIName, Verb, XMLorJSON, inputData, callback){
            var windowURL = getWindowURL();
            var target;
            if(event){
                target = event.target?event.target:event.srcElement;
            }
            rendering = true;
            setHttpRequest();
            xmlHttp.onreadystatechange=function(){
                if(xmlHttp.readyState==4){
                    if(callback){
                        callback(target, xmlHttp.responseText);
                        rendering = false;
                    }
                }
            }
            var url;
            if(Verb == "GET"){
                url = windowURL + "REST/" + XMLorJSON + "/" + APIName + '?' + inputData;
                xmlHttp.open("GET",url,true);
                xmlHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                xmlHttp.send();
            }else if(Verb == "POST"){
                var APIKey = getCookie('APIKey');
                url = windowURL + "REST/" + XMLorJSON + "/" + APIName;
                var postData = 'Input='+encodeURIComponent(inputData); //'Input=' + inputData;
                xmlHttp.open("POST",url,true);
                xmlHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                xmlHttp.setRequestHeader('Key', APIKey);
                xmlHttp.send(postData);
            }
            return false;
}

function myFunction(){
            var queryString = '';
            var res = CallRestAPI(event, 'ListWPT', 'GET', 'JSON', queryString, generateList);
}

myFunction();

因此，我的问题是如何将它们组合在一起并让其动态变化。

Answer 1

现在，我找到一种可以添加结果的方法。

1，更改项目并在加载时调用RESTAPI，还将这些项目作为参数传递。

items: [],
onLoad: function(element){
    this.add('Please select a webpart', '');
    myFunction(this);
}

2，编辑功能，添加一个新参数作为下拉列表。 在“生成列表”功能中，遍历结果并添加结果。

function generateList(target, responseData, dropdownList){
    var obj = JSON.parse(responseData);
    var WPTList = obj.ListWPT.List;
    for(var v in WPTList){
        dropdownList.add(WPTList[v]['Description'], WPTList[v]['Value']);
    }
}

function myFunction(dropdownList){
    var queryString = '';
    CallRestAPI(event, 'ListWPT', 'GET', 'JSON', queryString, generateList, dropdownList);
}