TinyMCE：从模式窗口中的列表框中获取值答案

【问题标题】：TinyMCE: get values from a listbox in a modal windowTinyMCE：从模式窗口中的列表框中获取值
【发布时间】：2017-07-05 15:52:25
【问题描述】：

我正在为 Wordpress 创建一个 TinyMCE 插件。它有一个textbox 和一个listbox 字段，都停留在模式窗口中。代码如下：

(function () {
    tinymce.create('tinymce.plugins.windowdata', {
        init : function(ed, url) {
            ed.addButton('showModal', {
                title: 'Show Modal',
                image: url + '/img/button.png',
                onclick: function () {
                    ed.windowManager.open({
                        title: 'Minestra',
                        body: [
                            {type: 'textbox', name: 'Field', label: 'Number', value: '', tooltip: 'Tooltip', maxLength: 3, classes: 'i1n'}, //textbox
                            {type: 'listbox', label: 'Listbox', classes: 'i1lb', values: [
                                {text: '', value: ''},
                                {text: 'Number', value: 'lone_number'},
                                {text: 'Bar', value: 'bar'},
                            ]}, //listbox
                        ],
                        onsubmit: function () {
                            var n1 = document.getElementsByClassName('mce-i1n')[0].value; //textbox value
                            var t1 = document.getElementsByClassName('mce-i1lb')[0].getElementsByTagName('button')[0].getElementsByClassName('mce-txt')[0].innerHTML; //listbox value

                            ed.execCommand('mceInsertContent', 0, n1+' is of type '+t1) //write contents
                        }
                    })
                }
            });
    }
)

我的问题是关于如何获取字段值。我所做的与textbox （onsubmit() 方法中的n1 var）非常有效，但listbox 得到的文本与TinyMCE 用户显示的文本相同（每个列表框项中的文本var）。

我想要的是一种获取价值的方法；另外，我想我没有得到正确的方法，甚至没有文本框。任何人都可以帮助我吗？谢谢。

【问题讨论】：

标签： javascript wordpress listbox tinymce

【解决方案1】：

生成内容的更好方法是：

onsubmit: function (e) {
    // Insert content when the window form is submitted
              e.insertContent('Textbox content: ' + e.data.Field);
              e.insertContent('Listbox content: ' + e.data.Listbox)
}

【讨论】：

【解决方案2】：

我自己解决了：我必须为我的所有字段命名：

    {type: 'textbox', name: 'Field', label: 'Number', value: '', tooltip: 'Tooltip', maxLength: 3, classes: 'i1n'}, //textbox
    {type: 'listbox', name: 'Listbox', label: 'Listbox', classes: 'i1lb', values: [
        {text: '', value: ''},
        {text: 'Number', value: 'lone_number'},
        {text: 'Bar', value: 'bar'},
    ]

此时，为了生成我的内容，我以这种方式获得了值：

onsubmit: function (e) {
    e.data.Field;
    e.data.Listbox;
}

并用它在 TinyMCE 文本区域中编写。为了取回值，我必须以这种方式修改文本框字段：

{type: 'textbox', name: 'Field', label: 'Number', value: '', tooltip: 'Tooltip', maxLength: 3, classes: 'i1n', value: ed.selection.getContent()}

与列表框类似

【讨论】：