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); 
       } 
      }); 
     } 
    }); 
});