Question

如何在插件对话框打开时预先选择特定的列表框选项？

tinymce.PluginManager.add('mybutton', function(editor, url) {
editor.addButton('mybutton', {
    icon: true,
    image: url + '/img/mybutton.png',
    title: 'Select An Option',
    onclick: function() {
        editor.windowManager.open({
            title: 'My options',
            body: [
                {
                    type: 'listbox',
                    name: 'myoptions',
                    label: 'My Options',
                    'values': [
                        {text: 'Option 1', value: '1'},
                        {text: 'Option 2', value: '2'},
                        {text: 'Option 3', value: '3'}, /* preselect this option */
                        {text: 'Option 4', value: '4'},
                        {text: 'Option 5', value: '5'},
                    ]
                }
            ],
            onsubmit: function(v) {
                editor.insertContent(v.data.myoptions);
            }
        });
    }
});
});

Answer 1

由于某种原因，Listbox documentation中缺少这个，但解决方案非常简单：将值属性添加到传递给tinymce的列表框对象，它将预先选择它。

小心不要将值设置为文本/标签，而是设置要预选的列表框项的实际值。

 tinymce.PluginManager.add('mybutton', function(editor, url) {
    editor.addButton('mybutton', {
        icon: true,
        image: url + '/img/mybutton.png',
        title: 'Select An Option',
        onclick: function() {
            editor.windowManager.open({
                title: 'My options',
                body: [
                    {
                        type: 'listbox',
                        name: 'myoptions',
                        label: 'My Options',
                        values: [
                            {text: 'Option 1', value: '1'},
                            {text: 'Option 2', value: '2'},
                            {text: 'Option 3', value: '3'}, /* preselect this option */
                            {text: 'Option 4', value: '4'},
                            {text: 'Option 5', value: '5'},
                        ],
                        value: '3'
                    }
                ],
                onsubmit: function(v) {
                    editor.insertContent(v.data.myoptions);
                }
            });
        }
    });
});

Answer 2

我发现在对话框中包含外部页面要容易得多，所以我可以从头开始创建自己的表单，并使用Jquery轻松控制它。

// Opens a HTML page inside a TinyMCE dialog and pass in two parameters
editor.windowManager.open({
    title: "My PHP/HTML dialog",
    url: 'mydialog.php',
    width: 700,
    height: 600
}, {
    content: tinymce.activeEditor.selection.getContent({format: 'html'}),
    nodeName: editor.selection.getNode().nodeName
});

然后在mydialog.php中与当前的TinyMCE交互：

/* get content from TinyMCE */
console.log(args.content);
console.log(args.nodeName);

/* set content in TinyMCE */
top.tinymce.activeEditor.insertContent('My changed content here');

/* close the dialog */
top.tinymce.activeEditor.windowManager.close();

参考资料可以在这里找到：

http://www.tinymce.com/wiki.php/Tutorials:Creating_custom_dialogs

Answer 3

尝试使用onPostRender并通过value（）函数将选定的值设置为。

示例：

{
    type: 'listbox',
    name: 'text',
   values: [
      {text : '1', value : '1'},
      {text : '2', value : '2'},
      {text : '3', value : '3'}
   ],
   onPostRender: function() {
     this.value('2');
   }
}

Answer 4

根据他们的列表框示例（https://www.tiny.cloud/docs-4x/demo/custom-toolbar-listbox/），可以使用onPostRender完成此操作。我在WordPress 5.3.2中启用了以下代码（启用了经典编辑器插件）：

tinymce.PluginManager.add('mybutton', function( editor, url ) {
    editor.addButton( 'mybutton', {
      type: 'listbox',
      text: tinyMCE_object.button_name,
      icon: false,
      onselect: function (e) {
        editor.insertContent(this.value());
      },
      values: [
        { text: '[one_half]', value: '[one_half] [/one_half]' },
        { text: '[one_third]', value: '[one_third] [/one_third]' },
        { text: '[one_fourth]', value: '[one_fourth] [/one_fourth]' },
        { text: '[one_fifth]', value: '[one_fifth] [/one_fifth]' },
        { text: '[grid]', value: '[grid] [/grid]' },
        { text: '[grid_element]', value: '[grid_element] [/grid_element]' }
      ],
      onPostRender: function () {
        // Select the second item by default
        this.value('[one_third] [/one_third]');
      }
    });
  });

TinyMCE 4插件 - 在对话框打开时预选列表框选项

4 个答案: