Question

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

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

Answer 1

这可能会对你有所帮助。它没有使用工具栏，而是添加了一个带有自定义menubar的额外menuitems项。

HTML

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

的JavaScript

它的工作原理是将menuItems添加到菜单中。然后，我们可以为menuitem提供classes选项。这允许我们通过css类选择器分别定位每个菜单项。例如。如果我们提供classes: "monospace"。 TinyMCE将其转换为.mce-monospace作为类选择器。但是，除非您选择更大的css优先级，否则将禁止使用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。

看一下这个例子Demo

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

1 个答案: