React Draft.js所见即所得:如何以编程方式在光标位置插入文本？

import React, { useState } from 'react';
import { Editor, EditorState, Modifier } from 'draft-js';

const MyEditor = () => {
  const [editorState, setEditorState] = useState(EditorState.createEmpty());

  // 处理文本插入的函数
  const insertText = () => {
    const contentState = editorState.getCurrentContent();
    const selectionState = editorState.getSelection();

    // 创建一个新的ContentState，其中包含要插入的文本
    const newContentState = Modifier.insertText(
      contentState,
      selectionState,
      '要插入的文本'
    );

    // 更新EditorState
    const newEditorState = EditorState.push(
      editorState,
      newContentState,
      'insert-characters'
    );

    setEditorState(newEditorState);
  };

  return (
    <div>
      <button onClick={insertText}>插入文本</button>
      <Editor editorState={editorState} onChange={setEditorState} />
    </div>
  );
};

export default MyEditor;

import React from 'react';
import MyEditor from './MyEditor';

const App = () => {
  return (
    <div>
      <h1>React Draft.js所见即所得</h1>
      <MyEditor />
    </div>
  );
};

export default App;