React Draft Editor编辑模式初始值问题：传入已保存description

问题根源 #

你的TextEditor组件完全独立维护自身的editorState，初始化时硬编码了默认文本，且没有接收外部传入的初始内容、也未监听外部内容变化，导致切换到编辑模式时无法加载已保存的description。

修复步骤 #

1. 给TextEditor添加初始Markdown支持

修改TextEditor组件，让它能接收外部传入的初始Markdown内容，并转换为Draft编辑器所需的格式：

import { convertFromMarkdown } from 'draft-js-import-markdown'; // 导入Markdown转Draft的配套工具
const Editor = dynamic(
  () => import("react-draft-wysiwyg").then((mod) => mod.Editor),
  { ssr: false },
);

export default forwardRef<Object, EditorProps>(function TextEditor(props, ref) {
  const [editorState, setEditorState] = useState(() => {
    let contentState;
    // 优先使用传入的初始Markdown，无传入值时用默认文本
    if (props.initialMarkdown) {
      contentState = convertFromMarkdown(props.initialMarkdown);
    } else {
      contentState = ContentState.createFromText("This is the default text.");
    }
    return EditorState.createWithContent(contentState);
  });

  // 监听初始Markdown变化，实时同步编辑器内容
  useEffect(() => {
    if (props.initialMarkdown) {
      const contentState = convertFromMarkdown(props.initialMarkdown);
      setEditorState(EditorState.createWithContent(contentState));
    }
  }, [props.initialMarkdown]);

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

  return (
    <Editor
      editorClassName={cn(
        "border-2 border-solid border-custom-primary px-3 min-h-[350px] cursor-text ",
        props.editorClassName,
      )}
      toolbar={{
        options: ["inline", "list", "link", "history"],
        inline: {
          options: ["bold", "italic", "underline"],
        },
      }}
      editorState={editorState}
      onEditorStateChange={onEditorStateChange}
      editorRef={(r) => {
        if (typeof ref === "function") {
          ref(r);
        } else if (ref) {
          ref.current = r;
        }
      }}
      {...props}
    />
  );
});

2. 在JobDetails页面传递初始值给TextEditor

修改编辑模式下的TextEditor调用，传入已保存的editDescription作为初始内容：

<div className="text-custom-secondary">
  {mode === "view" ? (
    description && <Markdown>{description}</Markdown>
  ) : (
    <TextEditor
      initialMarkdown={editDescription} // 传递已保存的描述作为编辑器初始值
      onChange={(editDescription) => {
        setEditDescription(draftToMarkdown(editDescription));
      }}
    />
  )}
</div>

说明 #

• 借助draft-js-import-markdown工具（和你使用的draftToMarkdown是配套工具），将已保存的Markdown文本转换为Draft编辑器可识别的ContentState。
• 通过useEffect监听initialMarkdown参数变化，确保外部description更新时，编辑器内容同步更新。
• 仅在JobDetails页面传递initialMarkdown参数，其他场景使用编辑器时仍保留默认文本，满足你的需求。

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