如何在react草稿中设置初始编辑器状态所见即所得

在React草稿中设置初始编辑器状态所见即所得，可以通过使用第三方库来实现。一个常用的库是react-draft-wysiwyg，它提供了一个富文本编辑器组件，可以实现所见即所得的编辑器状态。

首先，需要安装react-draft-wysiwyg库。可以使用npm或者yarn进行安装：

npm install react-draft-wysiwyg

或者

yarn add react-draft-wysiwyg

安装完成后，可以在React组件中引入并使用Editor组件。以下是一个示例代码：

import React, { useState } from 'react';
import { EditorState, convertToRaw } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';

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

  const onEditorStateChange = (newEditorState) => {
    setEditorState(newEditorState);
  };

  const handleSave = () => {
    const content = convertToRaw(editorState.getCurrentContent());
    // 在这里处理保存逻辑
    console.log(content);
  };

  return (
    <div>
      <Editor
        editorState={editorState}
        onEditorStateChange={onEditorStateChange}
      />
      <button onClick={handleSave}>保存</button>
    </div>
  );
};

export default MyEditor;

在上述代码中，我们首先导入所需的库和样式文件。然后，使用useState钩子来创建一个名为editorState的状态变量，并使用EditorState.createEmpty()来设置初始编辑器状态为空。

接下来，我们定义了一个onEditorStateChange函数，用于更新编辑器状态。在Editor组件中，我们将editorState作为editorState属性传递给组件，并将onEditorStateChange函数作为onEditorStateChange属性传递给组件。

最后，我们在组件中添加了一个保存按钮，并在点击按钮时调用handleSave函数。在handleSave函数中，我们使用convertToRaw函数将编辑器内容转换为原始的Draft.js数据格式，并在控制台中打印出来。你可以在这里处理保存逻辑，例如将内容发送到服务器进行保存。

这样，你就可以在React草稿中设置初始编辑器状态所见即所得了。请注意，这只是一个简单的示例，你可以根据自己的需求进行定制和扩展。