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 中)实现此目的的方法是调用 Controller 操作以获取新列表，然后获取“mylistbox”对象并重新分配它，但我不确定如何将它们放在一起。

Answer 1

就更新 TinyMCE 列表框而言，您可以尝试使用 tinymce.ui.NativeListBox而不是标准 tinymce.ui.ListBox .您可以通过将最后一个参数设置为 cm.createListBox 来完成此操作至 tinymce.ui.NativeListBox .这样，您将拥有一个普通的旧 <select>您可以像往常一样更新。

不利的是，自 NativeListBox 以来，您似乎需要手动连接自己的 onchange 监听器。在内部维护自己的项目列表。

编辑:

昨晚我试了一下这个，这是我想出的。

首先，这里是如何使用 native 列表框并连接我们自己的 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;
    });
});

就在运行时更新列表框而言，您调用 Controller 操作来获取新项目的想法是合理的；我对 ASP.NET 不熟悉，所以在这方面我帮不了你。

<select> 的 ID TinyMCE 创建的格式为 editorId_controlId，在您的情况下 controlId 是“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>

希望这对您有所帮助，或者至少能让您入门。