Safari浏览器中TinyMCE执行mceInsertContent的br标签异常问题

我之前也在Safari里碰到过TinyMCE这个烦人的问题！用execCommand('mceInsertContent')插入<p>Nice Day</p>时，浏览器自动在末尾加了个<br>，直接导致光标跳了两行——Chrome和Firefox里都好好的，就Safari搞特殊。下面给你几个亲测有效的解决办法：

方法1：改用官方推荐的insertContent API #

TinyMCE现在更推荐使用insertContent方法而非老的execCommand，这个方法在Safari下的兼容性更稳定，不容易出现额外标签的问题：

tinymce.activeEditor.insertContent('<p>Nice Day</p>');

方法2：插入后手动清理多余的<br> #

如果暂时不想更换API，可以在插入内容后立即检查并移除末尾的<br>标签：

// 执行插入操作
tinymce.activeEditor.execCommand('mceInsertContent', false, '<p>Nice Day</p>');

// 清理末尾多余的br
const editorBody = tinymce.activeEditor.getBody();
const lastElement = editorBody.lastElementChild;
if (lastElement?.tagName === 'BR') {
  lastElement.remove();
}

方法3：调整TinyMCE初始化配置 #

在初始化TinyMCE时添加相关配置，强制编辑器不要保留多余的尾随<br>：

tinymce.init({
  // 你的其他配置项...
  forced_root_block: 'p', // 确保块级元素默认使用p标签
  remove_trailing_brs: true, // 自动移除内容末尾的br标签
});

为什么只有Safari会出现这个问题？ #

核心原因是Safari对contenteditable元素的DOM处理逻辑和其他浏览器存在差异，TinyMCE在做跨浏览器兼容时，Safari下的插入逻辑会额外生成一个<br>来维持光标位置，这就意外导致了多余的行间距。

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