TinyMCE的4插件菜單下拉菜單欄

Question

我需要添加另一個下拉菜單旁邊的「工具」項中TinyMCE的4：

我發現的最接近的解決方案是這樣的：

// Adds a custom menu item to the editor that inserts contents when clicked 
// The context option allows you to add the menu item to an existing default menu 
tinymce.init({ 
    ... 

    setup: function(ed) { 
     ed.addMenuItem('example', { 
     text: 'My menu item', 
     context: 'tools', 
     onclick: function() { 
      ed.insertContent('Hello world!!'); 
     } 
     }); 
    } 
}); 

但它只是添加一個項目到已經存在的「工具」菜單。

Answer 1

你可以嘗試同時指定「菜單」和「菜單欄的結果'選項時調用tinymce.init（）在現代主題上添加一個新的菜單欄項目。

我試過了，它的工作原理。

您可以用TinyMCE 4.1.7查看http://fiddle.tinymce.com/39eaab/1上的現場演示。

<script type="text/javascript"> 
tinymce.init({ 
    selector: "textarea", 
    menu : { 
     file : {title : 'File' , items : 'newdocument'}, 
     edit : {title : 'Edit' , items : 'undo redo | cut copy paste pastetext | selectall'}, 
     insert : {title : 'Insert', items : 'link media | template hr'}, 
     view : {title : 'View' , items : 'visualaid'}, 
     format : {title : 'Format', items : 'bold italic underline strikethrough superscript subscript | formats | removeformat'}, 
     table : {title : 'Table' , items : 'inserttable tableprops deletetable | cell row column'}, 
     tools : {title : 'Tools' , items : 'spellchecker code'}, 
     newmenu: {title : 'New Menu', items : 'newmenuitem'} 
    }, 
    menubar: 'file edit newmenu', 
    setup: function(editor) { 
     editor.addMenuItem('newmenuitem', { 
      text: 'New Menu Item', 
      context: 'newmenu', 
      onclick: function() { alert('yey!'); } 
     }); 
    } 
}); 
</script> 

<form method="post" action="dump.php"> 
    <textarea name="content"></textarea> 
</form> 

Answer 2

不知道這是你需要什麼，但如果你試試這個：

<script type="text/javascript"> 
tinymce.init({ 
    selector: "textarea", 
    toolbar: "mybutton", 
    setup: function(editor) { 
     editor.addButton('mybutton', { 
      type: 'menubutton', 
      text: 'My button', 
      icon: false, 
      menu: [ 
       {text: 'Menu item 1', onclick: function() {editor.insertContent('Menu item 1');}}, 
       {text: 'Menu item 2', onclick: function() {editor.insertContent('Menu item 2');}} 
      ] 
     }); 
    } 
}); 
</script> 

您可以查看代碼here