如何在 TinyMCE 中仅针对标题禁用粗体按钮？答案

【问题标题】：How disable bold button in TinyMCE only for headers?如何在 TinyMCE 中仅针对标题禁用粗体按钮？
【发布时间】：2020-11-16 15:34:47
【问题描述】：

我想控制 TinyMCE 中的粗体按钮，使其对标题禁用，但对于其他文本仍然可以正常工作。有可能吗？

这样做的好方法类似于自定义“clear formatting”按钮，您可以在其中指定选择器，但这不适用于“粗体”格式。

tinymce.init({
  formats: {
    removeformat: [
      // Configures `clear formatting` to remove specified elements regardless of its attributes
      { selector: 'b,strong,em,i,font,u,strike', remove: 'all' },
    ]
  }
});

代码示例：https://codepen.io/andreyprokhorov/pen/zYBbdVy

如果我为“span”定义粗体样式，那么我不能禁用标题的粗体 (h1-h6)。除此之外，当在编辑器中选择标题时，我希望“粗体”按钮看起来被禁用。

  formats: {
    bold: {  inline: 'span', classes: 'bold' }, //nothing disabled
    bold: {  selector: 'h1,h2,h3,h4,h5,h6', classes: '' },  //disables everything
    bold: [ {  inline: 'span', classes: 'bold' }, { selector: 'h1,h2,h3,h4,h5,h6', classes: '' }], //nothing disabled
  },

有什么想法吗？

【问题讨论】：

标签： javascript tinymce tinymce-5

【解决方案1】：

用“valid_children”setting解决它：

tinymce.init({
  valid_children : '-h1[strong|em],-h2[strong|em],-h3[strong|em],-h4[strong|em],-h5[strong|em]'
});

此规则不允许将粗体和斜体 html 元素作为 h1-h5 中的子元素。不幸的是，相应的按钮在编辑器中没有被禁用，但是当你点击它们时至少没有任何反应，它们仍然适用于其他文本。

【讨论】：