TinyMCE的 - 如何解決這個下拉菜單

Question

我創建了一個CodePen來說明問題：TinyMCE Menu Issue

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' }, 
       myapp: { title: 'My Application', items: 'myapp' } 
      }, 
      plugins: [ 
    'advlist autolink lists link image charmap print preview hr anchor pagebreak', 
    'searchreplace wordcount visualblocks visualchars code fullscreen', 
    'insertdatetime media nonbreaking save table contextmenu directionality', 
    'emoticons template paste textcolor colorpicker textpattern imagetools codesample toc' 
      ], 
      toolbar1: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image', 
      toolbar2: 'forecolor backcolor emoticons | codesample', 
      image_advtab: true, 
      content_css: [ 
      '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i', 
      '//www.tinymce.com/css/codepen.min.css' 
      ], 
      setup: function (editor) { 
       editor.addMenuItem('myapp', { 
        text: 'My Application', 
        context: 'myapp', 
        menu: [{ 
         text: 'Data Loop', 
         onclick: function() { 
          editor.insertContent('{LOOP:Data}'); 
         } 
        }, { 
         text: 'Collection Loop', 
         onclick: function() { 
          editor.insertContent('{LOOP:Collection}'); 
         } 

        }, { 
         text: 'Process Loop', 
         onclick: function() { 
          editor.insertContent('{LOOP:Process}'); 
         } 

        }, { 
         text: 'Server Name', 
         onclick: function() { 
          editor.insertContent('{ServerName}'); 
         } 

        }, { 
         text: 'Email Group Name', 
         onclick: function() { 
          editor.insertContent('{EmailGroupName}'); 
         } 

        }, { 
         text: 'Alert Group Name', 
         onclick: function() { 
          editor.insertContent('{AlertGroupName}'); 
         } 

        }] 
       }); 
      } 

     }); 

如果你看看那codepen，你會看到「我的應用」菜單竟然下拉兩次，我不是很想要。我想要一個簡單的單層下拉菜單。不知道爲什麼我無法弄清楚。

任何幫助，非常感謝！

Answer 1

您需要分別創建每個按鈕並將它們添加到工具欄中。

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' }, 
    myapp: { title: 'My Application', items: 'myapp1 myapp2 myapp3 myapp4 myapp5 myapp6 myapp7' } 
    }, 
    plugins: [ 
    'advlist autolink lists link image charmap print preview hr anchor pagebreak', 
    'searchreplace wordcount visualblocks visualchars code fullscreen', 
    'insertdatetime media nonbreaking save table contextmenu directionality', 
    'emoticons template paste textcolor colorpicker textpattern imagetools codesample toc' 
    ], 
    toolbar1: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image', 
    toolbar2: 'forecolor backcolor emoticons | codesample', 
    image_advtab: true, 
    content_css: [ 
    '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i', 
    '//www.tinymce.com/css/codepen.min.css' 
    ], 
    setup: function (editor) { 
    editor.addMenuItem('myapp1', { 
     text: 'Data Loop', 
     onclick: function() { 
     editor.insertContent('{LOOP:Data}'); 
     } 
    }); 
    editor.addMenuItem('myapp2', { 
     text: 'Collection Loop', 
     onclick: function() { 
     editor.insertContent('{LOOP:Collection}'); 
     } 
    }); 
    editor.addMenuItem('myapp4', { 
     text: 'Process Loop', 
     onclick: function() { 
     editor.insertContent('{LOOP:Process}'); 
     } 
    }); 
    editor.addMenuItem('myapp5', { 
     text: 'Server Name', 
     onclick: function() { 
     editor.insertContent('{ServerName}'); 
     } 

    }); 
    editor.addMenuItem('myapp6', { 
     text: 'Email Group Name', 
     onclick: function() { 
     editor.insertContent('{EmailGroupName}'); 
     } 

    }); 
    editor.addMenuItem('myapp7', { 
     text: 'Alert Group Name', 
     onclick: function() { 
     editor.insertContent('{AlertGroupName}'); 
     } 
    }); 
    } 
}); 

這是更新您的codepen：
http://codepen.io/anon/pen/zojzoL