Next.js中ContentEditable设为LTR却反向显示内容的修复方案

我在React/Next.js中开发一款富文本编辑器，使用contentEditable div实现编辑功能。编写了updateContent函数，通过DOMPurify清理该div的HTML内容后更新innerHTML，但实现后输入的文本会反向显示，例如输入“Hello”会显示为“olleH”。尝试过保存并恢复选区范围、显式设置文本方向、避免直接操作innerHTML等多种修复方法均无效。当前技术栈为Next 14.0.4、dompurify 3.0.8，运行环境是M1 Mac上的Chrome 120.0.6099.216。

相关代码如下：

updateContent函数 #

// 用于更新并清理内容的函数
const updateContent = useCallback(() => {
  if (!editableRef.current) return;

  // 保存当前选区
  const selection = window.getSelection();
  let savedRange = null;
  if (selection && selection.rangeCount > 0) {
    const range = selection.getRangeAt(0);
    savedRange = {
      startContainer: range.startContainer,
      startOffset: range.startOffset,
      endContainer: range.endContainer,
      endOffset: range.endOffset,
    };
  }

  // 清理并更新内容
  const rawHtmlContent = editableRef.current.innerHTML;
  const sanitizedContent = DOMPurify.sanitize(rawHtmlContent, {
    ADD_TAGS: ["iframe"],
    ADD_ATTR: ["allowfullscreen", "frameborder", "src"],
  });
  editableRef.current.innerHTML = sanitizedContent;

  // 恢复光标位置
  if (savedRange) {
    const newRange = document.createRange();
    newRange.setStart(savedRange.startContainer, savedRange.startOffset);
    newRange.setEnd(savedRange.endContainer, savedRange.endOffset);
    selection.removeAllRanges();
    selection.addRange(newRange);
  }

  setContent(sanitizedContent);
  onContentChange(sanitizedContent);
  setIsCodeMode(sanitizedContent.includes("<pre>"));
}, [editableRef, onContentChange]);

编辑器div代码 #

<div
  ref={editableRef}
  contentEditable
  onInput={updateContent}
  dangerouslySetInnerHTML={{ __html: content }}
  onPaste={handlePaste}
  dir="ltr" 
/>

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