Tinymce:将自定义 HTML 添加到工具栏

Question

我想使用字体系列选择器扩展 tinymce 工具栏，该选择器显示使用该字体系列设置样式的字体系列名称。 为此，我需要用类或内联 css 包装每个字体名称标记。 我已经搜索了 tinymce API 文档，并且正在努力寻找一种在菜单项中添加自定义 HTML 的方法。

我得到的最接近的是一个无样式的按钮，它打开了一个带有自定义 HTML 选择器的面板，但它并不理想。 我真的很想直接向使用字体系列设置样式的工具栏添加一个选择。

Answer 1

这可能会对您有所帮助。它不使用工具栏，而是添加具有自定义menuitems的额外menubar项。

.HTML

<form>
<textarea></textarea>
</form>

JavaScript

它的工作原理是将菜单项添加到菜单中。然后，我们可以为菜单项提供classes选项。这允许我们通过 css 类选择器分别定位每个菜单项。例如，如果我们提供classes: "monospace".TinyMCE将其转换为.mce-monospace作为类选择器。但是，除非您选择更大的 css 优先级，否则 tinymces css 规则将覆盖。

tinymce.init({
selector: "textarea",
menu: {
mynewmenu: {
title: 'Select Font Family',
items: 'arial | monospace | timesnew'
}
},
menubar: 'mynewmenu',
setup: function(editor) {
editor.addMenuItem('arial', {
text: 'Arial',
classes: "arial",
context: 'mynewmenu',
onclick: function() {
alert('yey!');
}
});
editor.addMenuItem('monospace', {
text: 'Monospace',            
classes: "monospace",
context: 'mynewmenu',
onclick: function() {
alert('yey!');
}
});
editor.addMenuItem('timesnew', {
text: 'Times New Roman',          
classes: "timesnew",
context: 'mynewmenu',
onclick: function() {
alert('yey!');
}
});
}
});

.CSS

这就是我如何通过 css 覆盖样式。

.mce-menu-item.mce-monospace > span {
font-family: monospace;
color: olive;
}
.mce-menu-item.mce-arial > span{
font-family: Arial;
color: red;
}
.mce-menu-item.mce-timesnew > span{
font-family: Times New Roman;
color: green;
}

请注意，如果您只使用.mce-monospace > span优先级值不够大，而.mce-menu-item.mce-monospace > span具有更大的优先级值并覆盖 tinymces css。

看看这个示例演示