TinyMCE v6：如何自动将<u>标签替换为带下划线样式的<span>标签？

你可以通过两种可靠的方式实现需求，替代无效的valid_elements配置写法：

方法一：通过编辑器事件拦截并替换标签 #

利用TinyMCE的beforeSetContent和beforeGetContent事件，在内容加载到编辑器、以及获取编辑器内容（保存时）两个节点自动替换<u>标签：

tinymce.init({
  selector: '#your-editor-id',
  setup: function(editor) {
    // 内容加载前替换<u>为目标span
    editor.on('beforeSetContent', function(e) {
      if (e.content) {
        e.content = e.content.replace(/<u>(.*?)<\/u>/g, '<span style="text-decoration: underline">$1</span>');
      }
    });
    // 获取内容（保存）前再次替换，确保输出内容符合要求
    editor.on('beforeGetContent', function(e) {
      if (e.content) {
        e.content = e.content.replace(/<u>(.*?)<\/u>/g, '<span style="text-decoration: underline">$1</span>');
      }
    });
  },
  // 保留必要的合法元素，移除u标签的允许
  valid_elements: "#p,strong,b,em,i,span[style=text-decoration: underline],strong/b,em/i"
});

这个方法会处理所有进入编辑器的内容（包括用户粘贴的<u>标签），同时确保最终导出的内容是转换后的<span>标签。

方法二：自定义下划线格式，让编辑器直接生成目标标签 #

配置TinyMCE的formats选项，将默认的下划线格式从<u>改为<span style="text-decoration: underline">，这样用户点击工具栏的下划线按钮时，直接生成你需要的标签：

tinymce.init({
  selector: '#your-editor-id',
  // 自定义下划线格式
  formats: {
    underline: { inline: 'span', styles: { 'text-decoration': 'underline' } }
  },
  // 确保工具栏包含下划线按钮（如果之前有配置的话）
  toolbar: 'underline',
  valid_elements: "#p,strong,b,em,i,span[style=text-decoration: underline],strong/b,em/i"
});

如果需要同时处理已有的<u>标签内容，可以把方法一和方法二结合使用，既让新生成的内容直接用<span>，又能转换历史或粘贴的<u>标签。

补充说明 #

你之前的valid_elements配置里span[style=text-decoration: underline]/u写法不生效，是因为TinyMCE的标签转换规则对这类自定义替换支持有限，仅对<strong>/b、<em>/i这类内置关联标签有效，对于<u>和<span>的转换不适用这种写法。

内容的提问来源于stack exchange，提问作者ovni07