如何在TinyMCE中实现选中文本重置font-family与font-size功能

核心实现逻辑 #

不要直接用外层CSS/jQuery操作编辑器DOM，TinyMCE默认采用隔离的iframe渲染内容，且有独立的内容数据模型，直接修改外部DOM会和编辑器缓存冲突导致失效，必须通过TinyMCE官方提供的API实现需求。

具体实现方法 #

方法1：自定义工具栏按钮实现一键清除 #

在TinyMCE初始化配置中添加自定义按钮，可精准只清除font-size/font-family属性，不影响加粗、斜体等其他样式：

tinymce.init({
  selector: 'textarea#你的编辑器ID',
  // 保留你原来的其他配置项
  toolbar: 'bold italic underline | clearFontSize clearFontFamily', // 把自定义按钮加到工具栏合适位置
  setup: function (editor) {
    // 新增重置字号按钮
    editor.ui.registry.addButton('clearFontSize', {
      text: '重置字号',
      tooltip: '清除选中文本的字号属性',
      onAction: function () {
        // 仅移除选中内容的font-size样式
        editor.execCommand('RemoveFormat', false, {styles: 'font-size'});
      }
    });
    // 新增重置字体按钮
    editor.ui.registry.addButton('clearFontFamily', {
      text: '重置字体',
      tooltip: '清除选中文本的字体属性',
      onAction: function () {
        // 仅移除选中内容的font-family样式
        editor.execCommand('RemoveFormat', false, {styles: 'font-family'});
      }
    });
  }
});

方法2：适配JCE操作逻辑，点击下拉菜单标题触发清除 #

如果要和JCE保持一致的交互，点击字号/字体下拉菜单的标题就执行清除操作，只需在上述配置的基础上，添加对应菜单标题的点击事件监听，绑定上面的清除逻辑即可。

注意事项 #

• 如果需要同时清除多个样式，可把styles参数改成数组格式，比如{styles: ['font-size', 'font-family']}
• 配置中RemoveFormat的第三个参数指定了仅清除目标样式，不会影响选中内容的其他格式效果
• 如果选中内容包含嵌套标签，API会自动递归处理所有子节点的对应样式，不需要额外写遍历逻辑

内容的提问来源于stack exchange，提问作者P. Frank