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

Question

我想用字体家族选择器扩展tinymce工具栏，该选择器显示使用该字体家族样式化的字体家族名称。 为此，我需要使用类或内联css包装每个字体名称标记。 我仔细检查了tinymce API文档，并努力寻找一种在菜单项中添加自定义HTML的方法。

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

Answer 1

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

HTML

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

JavaScript的

通过向菜单添加menuItems可以工作。 然后，我们可以向菜单项提供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。

看看这个例子演示