TinyMCE最新版：如何同时从HTML与编辑器DOM移除无效元素？

我明白你遇到的这个痛点——TinyMCE的invalid_elements和valid_elements默认只在导出HTML源码的时候做过滤清理，编辑器实时渲染的DOM里并不会主动移除这些“无效元素”，导致Ctrl+Enter后明明源码里没<br>，编辑器里却还能看到它。针对这个问题，我整理了几个亲测有效的方案，能帮你从根源解决：

方案1：从配置层面彻底修改换行逻辑（推荐） #

通过调整TinyMCE的换行相关配置，直接让编辑器不再生成<br>标签，不管是普通Enter还是Ctrl+Enter都用段落标签<p>来换行：

tinymce.init({
  // 你的其他编辑器配置...
  forced_root_block: 'p',       // 强制所有内容包裹在<p>标签内
  force_br_newlines: false,     // 禁用用<br>实现换行的逻辑
  force_p_newlines: true,       // 强制使用<p>标签来创建新行
  invalid_elements: 'br'        // 双重保险，确保导出源码时也清理掉可能残留的<br>
});

这个方案最省心，直接从编辑器的核心换行逻辑上禁用了<br>，不管用户怎么操作都不会生成它。

方案2：重写Ctrl+Enter的快捷键行为 #

如果需要保留部分场景的换行逻辑，只是想修改Ctrl+Enter的行为，可以直接拦截这个快捷键，替换成你想要的操作（比如插入新段落）：

tinymce.init({
  // 你的其他编辑器配置...
  invalid_elements: 'br',
  setup: function(editor) {
    // 拦截Ctrl+Enter快捷键，替换为插入新段落
    editor.shortcuts.add('Ctrl+Enter', function() {
      // 插入空段落，让光标自动定位到新段落内
      editor.execCommand('mceInsertContent', false, '<p></p>');
      // 如果你只是想要换行但不需要新段落，也可以用这个命令：
      // editor.execCommand('InsertNewLine');
    });
  }
});

这样用户按下Ctrl+Enter时，直接不会插入<br>，从操作源头避免了问题。

方案3：实时清理DOM中的<br>元素 #

如果担心有其他场景会插入<br>（比如粘贴外部内容），可以监听编辑器的内容变化事件，实时扫描并移除DOM中的<br>标签：

tinymce.init({
  // 你的其他编辑器配置...
  invalid_elements: 'br',
  setup: function(editor) {
    // 每当编辑器节点变化时触发清理
    editor.on('NodeChange', function() {
      const brNodes = editor.getBody().querySelectorAll('br');
      brNodes.forEach(br => {
        // 直接移除<br>标签
        br.remove();
        // 如果你想把<br>替换成段落，也可以这么写：
        // const newP = document.createElement('p');
        // br.parentNode.replaceChild(newP, br);
      });
    });
  }
});

这个方案相当于给编辑器加了个“实时过滤器”，不管什么途径插入的<br>都会被立刻清理掉。

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