[英]How to add a separator in a TinyMCE dropdown menu
I am working on a WordPress plugin and I can add TinyMCE buttons that present a dropdown menu when clicked.我正在开发一个 WordPress 插件,我可以添加 TinyMCE 按钮,单击时会显示一个下拉菜单。 However, I would like to add a horizontal separator (ie, a horizontal line) to that drop down menu to group options.
但是,我想在该下拉菜单中添加一个水平分隔符(即水平线)以对选项进行分组。
I have googled this for some time and the only information I have found is about adding a vertical separator (ie, a vertical line) between buttons on the menu itself.我已经用谷歌搜索了一段时间,我发现的唯一信息是关于在菜单本身的按钮之间添加垂直分隔符(即垂直线)。
Is it possible to add a horizontal separator to a dropdown menu in TinyMCE, and if so, how can I do it?是否可以在 TinyMCE 的下拉菜单中添加水平分隔符,如果可以,我该怎么做? Or is my only option to group these other items by using a submenu?
或者是我使用子菜单对这些其他项目进行分组的唯一选择?
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"
I need to add a horizontal separator right after the 'end of "Part"' item.我需要在“部分”项目的结尾之后添加一个水平分隔符。
(FWIW, the entire file I am working on is here .) (FWIW,我正在处理的整个文件都在这里。)
All of the documentation I've found is for inserting vertical separators between groups of icons on the menu bar.我找到的所有文档都是用于在菜单栏上的图标组之间插入垂直分隔符。 I haven't been able to find any information on adding horizontal separators between groups of items in a drop-down menu.
我无法找到有关在下拉菜单中的项目组之间添加水平分隔符的任何信息。
However, after a lot of experimentation, I found that this code:但是,经过大量的实验,我发现这段代码:
{
text: '|'
},
will add a horizontal separator.将添加一个水平分隔符。
I'm not suer if I understand you correctly, but if you need a horizontal line like this in the Full Featured Example - (in the drop-down menu Format) - after subscript and before formats, there solution is in the API: Insert a |如果我理解正确,我不觉得,但是如果您在全功能示例中需要这样的水平线 -(在下拉菜单格式中) - 在下标和格式之前,API 中有解决方案:插入| Pipe character between menu items .
菜单项之间的管道字符。
Maybe in your case, you can just rewrite the code to match the pattern here and apply |也许在您的情况下,您可以重写代码以匹配 此处的模式并应用 | .
.
I'm using TinyMCE 4.5.1.我正在使用 TinyMCE 4.5.1。 Kenneth Odle's solution didn't work for me but did lead me to the correct answer.
Kenneth Odle 的解决方案对我不起作用,但确实让我找到了正确的答案。
To get a horizontal rule on a dropdown menu, create a menu entry like the following:要在下拉菜单上获得水平规则,请创建如下所示的菜单条目:
{
title: '|'
}
I know that this is an old thread.我知道这是一个旧线程。 But, you can use 'separator' as type.
但是,您可以使用“分隔符”作为类型。
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);
}
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.