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> 

希望这有助于，或至少让你开始。