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» и переназначить его, но не уверен, как все это собрать вместе. 1006 *

Answer 1

Что касается обновления списка TinyMCE, вы можете попробовать использовать tinymce.ui.NativeListBox вместо стандартного tinymce.ui.ListBox. Вы можете сделать это, установив последний аргумент от cm.createListBox до tinymce.ui.NativeListBox. Таким образом, у вас будет обычный старый <select>, который вы можете обновить, как обычно.

Недостатком является то, что вам нужно вручную подключить свой собственный слушатель onchange, поскольку NativeListBox поддерживает собственный список элементов внутри.

EDIT:

Я немного поиграл с этим прошлой ночью, и вот что я придумал.

Во-первых, вот как использовать собственный список и подключить наш собственный обработчик 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, поэтому не могу вам помочь.

Идентификатор <select>, который создает TinyMCE, принимает форму editorId _ controlId , где в вашем случае controlId равно "mylistbox". Firebug в Firefox - это самый простой способ найти идентификатор <select>:)

Вот кнопка тестирования, которую я добавил на свою страницу, чтобы проверить, работает ли вышеуказанный код:

<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>

Надеюсь, это поможет или, по крайней мере, поможет вам начать.

Answer 2

Шаг 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();