如何在Draft.js编辑器中操作字符串且不丢失修改内容？

直接修改DOM元素的textContent会在键盘操作后还原，核心原因是Draft.js的编辑器状态完全由React组件内部的editorState管理，DOM只是该状态的渲染结果——当你操作键盘时，组件会用editorState里的原始内容重新渲染，覆盖手动修改的DOM。

不需要本地安装React或Draft.js，页面已加载这些库，直接在控制台执行以下步骤即可解决：

1. 定位持有editorState的React组件实例
   Draft.js的状态存在上层React组件中，先找到这个实例：

// 获取Draft编辑器根元素
const editorRoot = document.querySelector('.DraftEditor-root');
// 获取React内部实例（不同React版本属性名可能以__reactInternalInstance$或__reactFiber$开头）
const reactInternalKey = Object.keys(editorRoot).find(key => key.startsWith('__reactInternalInstance$') || key.startsWith('__reactFiber$'));
let reactInstance = editorRoot[reactInternalKey].return;

// 向上遍历找到持有editorState的组件
while (reactInstance) {
  if (reactInstance.state?.editorState) {
    break;
  }
  reactInstance = reactInstance.return;
}

2. 用Draft.js API更新编辑器状态
   调用页面已加载的Draft.js方法，直接修改编辑器状态：

// 从页面已加载的Draft.js中获取核心方法
const { EditorState, Modifier } = window.Draft || reactInstance.state.editorState.constructor.__proto__.constructor;

// 获取当前编辑器内容
const currentContent = reactInstance.state.editorState.getCurrentContent();
// 在内容末尾插入目标文本
const newContent = Modifier.insertText(
  currentContent,
  // 将光标定位到内容末尾
  currentContent.getSelection().merge({
    anchorOffset: currentContent.getPlainText().length,
    focusOffset: currentContent.getPlainText().length
  }),
  '\n\nSome other text' // 你要追加的文本内容
);

// 创建新的编辑器状态
const newEditorState = EditorState.push(reactInstance.state.editorState, newContent, 'insert-characters');
// 更新组件状态，确保渲染与状态同步
reactInstance.setState({ editorState: newEditorState });

这样修改后，编辑器的状态会被正确更新，后续键盘操作也不会再还原内容。

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