如何为contenteditable div设置文本？Zendesk Chrome扩展失效求助

我开发了一款用于Zendesk的Chrome扩展，原本能实现输入时自动将特定单词大写的功能，但现在失效了。推测是Zendesk对编辑器进行更新后，无法再修改或替换contenteditable div内元素的文本。

我尝试过以下方法均无效，修改后的文本总会恢复为原有内容：

• 使用innerHTML修改内容
• 使用textContent修改内容
• 使用jQuery的text()方法修改内容

我怀疑存在某个函数阻止了对编辑器的所有文本修改操作，尝试移除元素的input、keyup/keydown、compositionstart及compositionend等事件处理程序后，问题仍未解决。

更新1：查看Zendesk编辑器DOM结构，确认目标元素为contenteditable="true"的div，内部文本节点直接承载输入内容。
更新2：尝试使用document.execCommand('insertText', false, '大写内容')，但执行后文本依然会被恢复。

可行解决方案 #

1. 基于Selection API精准替换文本

不直接修改整个编辑器内容，而是定位光标附近的目标单词，替换后恢复光标位置，避免触发Zendesk的内容重置逻辑：

function autoCapitalizeTargetWord() {
  const editor = document.querySelector('div[contenteditable="true"]');
  if (!editor) return;

  const selection = window.getSelection();
  if (selection.rangeCount === 0) return;

  const range = selection.getRangeAt(0);
  const textNode = range.startContainer;
  if (textNode.nodeType !== Node.TEXT_NODE) return;

  // 替换目标单词（示例：将"zendesk"替换为"ZENDESK"）
  const originalText = textNode.textContent;
  const updatedText = originalText.replace(/zendesk/gi, 'ZENDESK');
  
  if (updatedText === originalText) return;

  // 修改文本并恢复光标位置
  textNode.textContent = updatedText;
  const cursorOffset = range.startOffset + ('ZENDESK'.length - 'zendesk'.length);
  const newRange = document.createRange();
  newRange.setStart(textNode, cursorOffset);
  newRange.collapse(true);
  
  selection.removeAllRanges();
  selection.addRange(newRange);
}

// 绑定到input事件，确保输入后立即执行
document.querySelector('div[contenteditable="true"]')?.addEventListener('input', autoCapitalizeTargetWord);

2. 用MutationObserver监听并拦截内容重置

通过MutationObserver监听编辑器文本变化，在Zendesk内部逻辑修改内容前完成替换，并临时断开观察者避免循环触发：

const editor = document.querySelector('div[contenteditable="true"]');
if (!editor) return;

const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if (mutation.type === 'characterData' && mutation.target.nodeType === Node.TEXT_NODE) {
      const originalText = mutation.target.textContent;
      const updatedText = originalText.replace(/目标单词/gi, '目标单词大写');
      
      if (updatedText === originalText) return;

      // 临时断开观察者
      observer.disconnect();
      mutation.target.textContent = updatedText;
      // 恢复光标位置
      const selection = window.getSelection();
      const newOffset = mutation.offset + (updatedText.length - originalText.length);
      const range = document.createRange();
      range.setStart(mutation.target, newOffset);
      range.collapse(true);
      
      selection.removeAllRanges();
      selection.addRange(range);
      // 重新启动观察者
      observer.observe(editor, { characterData: true, subtree: true });
    }
  });
});

// 启动观察者
observer.observe(editor, { characterData: true, subtree: true });

3. 模拟原生键盘输入行为

绕过DOM直接修改，模拟用户手动输入大写单词的操作，完全贴合Zendesk编辑器的交互逻辑：

function simulateCapitalizedInput(targetWord, capitalizedWord) {
  const editor = document.querySelector('div[contenteditable="true"]');
  if (!editor) return;
  
  editor.focus();
  // 删除原输入的小写单词
  for (let i = 0; i < targetWord.length; i++) {
    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Backspace', bubbles: true }));
    document.dispatchEvent(new KeyboardEvent('keyup', { key: 'Backspace', bubbles: true }));
  }
  // 输入大写单词
  capitalizedWord.split('').forEach(char => {
    document.dispatchEvent(new KeyboardEvent('keydown', { key: char, bubbles: true }));
    document.dispatchEvent(new KeyboardEvent('keyup', { key: char, bubbles: true }));
    document.dispatchEvent(new InputEvent('input', { data: char, bubbles: true }));
  });
}

// 在输入匹配目标单词时调用
document.querySelector('div[contenteditable="true"]')?.addEventListener('input', (e) => {
  const text = e.target.textContent;
  if (/zendesk/gi.test(text)) {
    simulateCapitalizedInput('zendesk', 'ZENDESK');
  }
});

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