TinyMCEは - どのようにこのドロップダウンメニュー

Question

を修正する私は、問題を説明するのを助けるためにCodePenを作成しました：あなたはその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}'); 
         } 

        }] 
       }); 
      } 

     }); 

すると、あなたは「マイアプリケーション」メニューは、実際には2回落下していることがわかります私は本当に欲しくない。単純な1レベルのドロップダウンが欲しい。なぜ私はそれを把握できないのか分かりません。

ご協力いただきありがとうございます。

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