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

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

我发现它更容易包含在对话框中的外部页，所以我可以从头开始创建自己的形式，轻松地用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 2

出于某种原因，这是缺少在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); 
       } 
      }); 
     } 
    }); 
});