wangeditor react Form.Item回显

WangEditor是一个富文本编辑器，在React应用中集成Form.Item时，如果你想实现在表单提交后数据的回显，可以按照以下步骤操作：

1. 首先，安装wangEditor组件：`npm install @wangeditor/react`
2. 在你的React组件中导入并初始化WangEditor实例：

import { createEditor } from '@wangeditor/react';

function MyComponent() {
  const [editor, setEditor] = useState(null);

  // 初始化编辑器
  const initEditor = (content) => {
    if (!editor) {
      setEditor(createEditor({
        textarea: document.getElementById('editor'), // 给予编辑器元素ID
        initialContent: content, // 回显的内容
      }));
    }
  };

  // 当从服务器获取到内容时，调用initEditor
  useEffect(() => {
    const savedContent = getSavedContentFromServer(); // 假设这是一个异步函数
    initEditor(savedContent);
    // 清理函数
    return () => editor.destroy();
  }, []);

  // 使用Form.Item展示编辑器
  <Form.Item label="富文本字段">
    {({ setFieldsValue }) => (
      <div>
        <textarea id="editor" readOnly={true} /> {/* 只读显示内容 */}
        <button onClick={() => setEditor((prevEditor) => prevEditor.create())}>打开编辑</button>
        {editor && <WangEditor ref={setEditor} />}
      </div>
    )}
  </Form.Item>

  // 提交表单时，将编辑器内容同步到state或通过API发送
  <Button type="primary" onClick={handleFormSubmit}>
    提交
  </Button>

  return ...;
}

当你点击“打开编辑”按钮时，用户可以修改内容，然后表单提交时会自动包含当前编辑器内的文本。