asp.net mvc - 如何更新tinyMCE中的下拉列表

Question

場景：我有一個標準的下拉列表，當該下拉列表中的值發生更改時，我想更新tinyMCE控件中存在的另一個下拉列表。

目前，它不會是我想要什麼，當我打開網頁（即第一次）......

function changeParent() { 

    } 

tinymce.create('tinymce.plugins.MoePlugin', { 
      createControl: function(n, cm) { 
       switch (n) { 
        case 'mylistbox': 
         var mlb = cm.createListBox('mylistbox', { 
          title: 'Inserts', 
          onselect: function(v) { 
           tinyMCE.execCommand("mceInsertContent",false,v);                 
          } 
         }); 

         <% foreach (var insert in (ViewData["Inserts"] as List<String>)) { %> // This is .NET 
          yourobject = '<%= insert %>'; // This is JS AND .NET 
          mlb.add(yourobject, yourobject); // This is JavaScript 
         <% } %>      

         // Return the new listbox instance 
         return mlb; 
       } 
       return null; 
      } 
     });    


<%= Html.DropDownList(Model.Record[184].ModelEntity.ModelEntityId.ToString(), ViewData["Containers"] as SelectList, new { onchange = "changeParent(); return false;" })%> 

我想到的方式來做到這一點（在ChangeParentFunction）是調用一個控制器動作要獲得一個新的列表，然後抓住'mylistbox'對象並重新分配它，但我不確定如何將它們放在一起。

Answer 1

步驟1 - 在控制器提供一個JsonResult

public JsonResult GetInserts(int containerId) 
    { 
     //some code to get list of inserts here 
     List<string> somedata = doSomeStuff(); 

     return Json(somedata); 
    } 

2步 - 創建javascript函數得到的Json導致

function getInserts() { 
    var params = {}; 
    params.containerId = $("#184").val(); 
    $.getJSON("GetInserts", params, updateInserts); 
}; 

updateInserts = function(data) { 
    var insertsElem = document.getElementById("183_mylistbox"); 

    insertsElem.options.length = 1; // Remove all but the first option. 

    var optElem = document.createElement("option"); 
    for (var item in data) { 
     optElem = document.createElement("option"); 
     optElem.value = item; 
     optElem.text = data[item]; 

     try { 
      insertsElem.add(optElem, null); // standards compliant browsers 
     } 
     catch(ex) { 
      insertsElem.add(optElem, item+1); // IE only (second paramater is the items position in the list) 
     } 
    } 
}; 

步驟3 - 上面創建NativeListBox（代碼由上面的ZoogieZork提供）

var mlb = cm.createListBox('mylistbox', { 
    title: 'Inserts' 
}, tinymce.ui.NativeListBox); 

// Set our own change handler. 
mlb.onPostRender.add(function(t) { 
    tinymce.dom.Event.add(t.id, 'change', function(e) { 
     var v = e.target.options[e.target.selectedIndex].value; 
     tinyMCE.activeEditor.execCommand("mceInsertContent", false, v); 
     e.target.selectedIndex = 0; 
    }); 
}); 

//populate inserts on listbox create 
getInserts(); 

Answer 2

就更新TinyMCE列表框而言，您可以嘗試使用tinymce.ui.NativeListBox而不是標準tinymce.ui.ListBox。您可以將最後一個參數設置爲cm.createListBox至tinymce.ui.NativeListBox。通過這種方式，您可以像平常那樣更新舊的<select>。

缺點是它看起來像你需要手動掛接你自己的onchange偵聽器，因爲NativeListBox在內部維護自己的項目列表。

編輯：

我打得四處這最後一夜了一下，這裏是我想出。

首先，這裏是如何使用本地列表框和線了自己的onChange處理，TinyMCE的方式：

// Create a NativeListBox so we can easily modify the contents of the list. 
var mlb = cm.createListBox('mylistbox', { 
    title: 'Inserts' 
}, tinymce.ui.NativeListBox); 

// Set our own change handler. 
mlb.onPostRender.add(function(t) { 
    tinymce.dom.Event.add(t.id, 'change', function(e) { 
     var v = e.target.options[e.target.selectedIndex].value; 
     tinyMCE.activeEditor.execCommand("mceInsertContent", false, v); 
     e.target.selectedIndex = 0; 
    }); 
}); 

至於更新在運行時列表框，您的呼叫控制器動作的想法獲得新項目是合理的;我對ASP.NET不熟悉，所以我不能真正幫助你。

是TinyMCE的創建<select>的ID的形式爲editorId _ 控件ID，在你的情況控件ID是 「mylistbox」。 Firefox中的Firebug是找到的<select> :)

的ID最簡單的方法，這裏的測試按鈕，我加入到我的網頁，以檢查上面的代碼是工作：

<script type="text/javascript"> 
function doFoo() { 
    // Change "myEditor" below to the ID of your TinyMCE instance. 
    var insertsElem = document.getElementById("myEditor_mylistbox"); 

    insertsElem.options.length = 1; // Remove all but the first option. 

    var optElem = document.createElement("option"); 
    optElem.value = "1"; 
    optElem.text = "Foo"; 
    insertsElem.add(optElem, null); 

    optElem = document.createElement("option"); 
    optElem.value = "2"; 
    optElem.text = "Bar"; 
    insertsElem.add(optElem, null); 
} 
</script> 
<button onclick="doFoo();">FOO</button> 

希望這有助於，或至少讓你開始。