如何在 TinyMCE 下拉菜单中添加分隔符

Question

我正在开发一个 WordPress 插件，我可以添加 TinyMCE 按钮，这些按钮在单击时会显示一个下拉菜单。但是，我想在该下拉菜单中添加水平分隔符（即水平线）以对选项进行分组。

我用谷歌搜索了一段时间，我找到的唯一信息是关于在菜单本身的按钮之间添加垂直分隔符（即垂直线）。

是否可以在 TinyMCE 的下拉菜单中添加水平分隔符，如果可以，我该怎么做？或者是我使用子菜单对这些其他项目进行分组的唯一选择吗？

            ed.addButton('d12-mb-button-2', {
            title:'Add a message block with a custom title',
            type:'menubutton',
            image: url + '/d12-mb-mce-button-2.png',
            menu: [
                    {
                    text: 'Part of a series',
                    value: 'Part',
                    icon: 'icon d12mb-part',
                    onclick: function() {
                        ed.windowManager.open( {
                            title: 'Please enter the data for this message box',
                            body: [{
                                type: 'textbox',
                                name: 'title',
                                label: 'This series of articles is about:'
                            },
                            {
                                type: 'textbox',
                                minHeight: 200,
                                minWidth: 400,
                                multiline: 'true',
                                name: 'description',
                                label: 'Description of this series:'
                            }
                            ],
                            onsubmit: function( epart ) {
                                ed.selection.setContent('[d12-part series="' + epart.data.title + '"]' + epart.data.description + '[/d12-part]');
                            }
                        });
                    }
                }, // End of "Part" 
                {
                    text: 'Add a support message',
                    value: 'Support',
                    icon: 'icon d12mb-support',
                    onclick: function() {
                        ed.windowManager.open( {
                            title: 'Please enter the support information',
                            body: [{
                                type: 'textbox',
                                name: 'title',
                                label: 'Support title:'
                            },
                            {
                                type: 'textbox',
                                minHeight: 200,
                                minWidth: 400,
                                multiline: 'true',
                                name: 'description',
                                label: 'Support message:'
                            }
                            ],
                            onsubmit: function( esupport ) {
                                ed.selection.setContent('[d12-support title="' + esupport.data.title + '"]' + esupport.data.description + '[/d12-support]');
                            }
                        });
                    }
                }, // End of "Support"

我需要在 'end of "Part"' 项之后添加一个水平分隔符。

（FWIW，我正在处理的整个文件是 here。）

Answer 1

如果我对你的理解是正确的，但如果你需要在 Full Featured Example 中这样的水平线 - （在下拉菜单格式中） - 在下标之后和格式之前，有解决方案是在 API: Insert a |菜单项之间的管道字符.

也许在您的情况下，您可以重写代码以匹配模式 here 并应用 | .

Answer 2

我找到的所有文档都是关于在菜单栏上的图标组之间插入垂直分隔符的。我找不到任何有关在下拉菜单中的项目组之间添加水平分隔符的信息。

但是，经过大量的实验，我发现这段代码：

                    {
                    text: '|'
                },

将添加水平分隔符。

Answer 3

我正在使用 TinyMCE 4.5.1。对我不起作用，但确实引导我找到了正确的答案。

要在下拉菜单上设置水平线，请创建如下所示的菜单项：

{
    title: '|'
}

Answer 4

我知道这是一个旧线程。但是，您可以使用 'separator' 作为类型。

const init = {
  ...,
  setup: (editor) => {
    editor.ui.registry.addMenuButton('split-links', {
      icon: 'link',
      tooltip: 'Insert link',
      fetch: (callback) => {
        const items = [
          {
            type: 'menuitem',
            text: 'Internal link',
            onAction: () => {
             //Define action here
            }
           },
           {
             type: 'separator'
           },
           {
             type: 'menuitem',
             text: 'External link',
             onAction: () => {
              //Define action here
             }
           }
        ];
        callback(items);
      }
    }
  }
}

如何在 TinyMCE 下拉菜单中添加分隔符

How to add a separator in a TinyMCE dropdown menu

javascript

wordpress

tinymce-4