如何在TinyMCE中禁用指定HTML标签？配置invalid_elements不生效是什么原因

API 探路者

2026-9-23

配置未生效的核心原因

TinyMCE的invalid_elements、valid_elements系列规则，默认仅在内容导出（调用getContent）、提交保存时触发过滤，不会实时拦截编辑过程中的操作。你在编辑时点击粗体按钮能看到文本加粗，只是编辑器临时插入了strong/b标签做渲染，最终导出的内容会按照配置自动过滤掉这些非法标签，你的配置本身是对的。

如果需要验证配置有效性，可以在编辑完内容后运行tinymce.activeEditor.getContent()查看输出，就能看到strong/b/em/i标签已经被清理掉了。

如果你需要编辑阶段完全禁止使用粗体、斜体功能

可以按以下补充配置实现实时拦截：

移除工具栏的粗体、斜体按钮，避免用户点选触发
禁用对应的快捷键操作
清空默认的粗体、斜体格式定义，避免其他插件意外调用
必要时增加粘贴预处理，过滤用户粘贴内容里的对应标签

完整配置参考：

tinymce.init({
  selector: 'textarea',
  // 原有过滤规则，控制最终输出内容
  invalid_elements: 'strong,b,em,i',
  valid_elements: 'p',
  // 新增配置：编辑阶段拦截
  toolbar: 'undo redo | blocks | alignleft aligncenter alignright', // 剔除bold、italic按钮
  invalid_shortcuts: 'meta+b, meta+i, ctrl+b, ctrl+i', // 禁用粗体、斜体快捷键
  formats: {
    bold: {}, // 清空默认粗体格式
    italic: {} // 清空默认斜体格式
  },
  // 可选：粘贴时直接过滤对应标签
  paste_preprocess: (plugin, args) => {
    args.content = args.content.replace(/<\/?(strong|b|em|i)[^>]*>/ig, '')
  }
});