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"

我需要在＆＃34; Part＆＃34;＆＃39;＆＃39;结束后立即添加水平分隔符。项目

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

Answer 1

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

然而，经过大量实验，我发现这段代码：

                    {
                    text: '|'
                },

将添加一个水平分隔符。

Answer 2

如果我理解正确的话，我就不是起作用，但是如果你需要Full Featured Example中的水平线 - （在下拉菜单格式中） - 在下标之后和格式之前，那么解决方案是在API中：插入|菜单项之间的管道字符。

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

Answer 3

我正在使用TinyMCE 4.5.1。 Kenneth Odle's solution对我不起作用，但确实让我得到了正确答案。

要在下拉菜单中获取水平规则，请创建如下菜单条目：

{
    title: '|'
}

Answer 4

我知道这是一个旧线程。但是，您可以使用“分隔符”作为类型。

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下拉菜单中添加分隔符

4 个答案: