Facebook平台execCommand insertText无法保留换行问题求助

这是Facebook.com上可创建帖子的contenteditable元素：

需要向该元素插入带换行符的文本，但尝试以下代码时，\n和\r会被移除：

document.execCommand("insertText", false,"a sentence with \n\r a new line")

效果如下：

已尝试insertHTML、insertParagraph命令，插入<br/>元素，修改.value、.textContent、.innerHTML、.innerText等方式，均无法解决问题。页面为受保护路由，无法提供最小可复现示例。

方法1：模拟手动输入（贴合原生行为） #

通过模拟Enter键操作，在文本段落间插入换行：

// 定位到目标contenteditable元素
const editable = document.querySelector('[contenteditable="true"]');
editable.focus();

// 插入第一段文本
document.execCommand("insertText", false, "a sentence with");

// 模拟按下Enter键触发换行
const enterKey = new KeyboardEvent('keydown', { key: 'Enter', bubbles: true });
editable.dispatchEvent(enterKey);

// 插入第二段文本
document.execCommand("insertText", false, "a new line");

方法2：用Range API构建带换行的内容 #

拆分文本后，通过DocumentFragment插入文本和<br>元素：

const editable = document.querySelector('[contenteditable="true"]');
editable.focus();

const targetText = "a sentence with \n a new line";
const textParts = targetText.split('\n');
const fragment = document.createDocumentFragment();

textParts.forEach((part, idx) => {
  if (idx > 0) {
    fragment.appendChild(document.createElement('br'));
  }
  fragment.appendChild(document.createTextNode(part));
});

// 将内容插入到光标位置
const range = window.getSelection().getRangeAt(0);
range.deleteContents();
range.insertNode(fragment);

方法3：直接修改DOM并触发输入事件 #

修改innerHTML后触发input事件，让编辑器识别内容变更：

const editable = document.querySelector('[contenteditable="true"]');
const formattedText = "a sentence with <br/> a new line";
editable.innerHTML = formattedText;

// 触发输入事件，同步编辑器状态
const inputEvent = new Event('input', { bubbles: true });
editable.dispatchEvent(inputEvent);

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