Как добавить динамические данные при создании плагина 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); 
}