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

                  }]
              });
          }

      });

如果你看那个代码笔，你会发现 'My Application' 菜单实际上下降了两次，我真的不想要这样。我想要一个简单的一级下拉菜单。不知道为什么我想不通。

非常感谢任何帮助！

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

这是对您的代码笔的更新：
http://codepen.io/anon/pen/zojzoL

TinyMce - 如何修复此下拉菜单

TinyMce - How to fix this dropdown menu

html

tinymce-4