react 富文本（函数式，.tsx）

//组件
import React, { useEffect, useState } from "react";
import BraftEditor from "braft-editor";
import "braft-editor/dist/index.css";

interface ICBraftEditor {
  htmlString?: string;
  onChange: (v: string) => void;
}

/**
 * 通用 富文本编辑器 组件
 */
export default function CBraftEditor(props: ICBraftEditor) {
  const { htmlString, onChange } = props;
  // console.log(htmlString)

  const [editorState, setEditorState] = useState(() => BraftEditor.createEditorState(null));

  useEffect(() => {
    if (!htmlString?.trim()) {
      return;
    }
    setEditorState(BraftEditor.createEditorState(htmlString));
    return () => {};
  }, [htmlString]);

  function submitContent() {
    // 在编辑器获得焦点时按下ctrl+s会执行此方法
    // 编辑器内容提交到服务端之前，可直接调用editorState.toHTML()来获取HTML格式的内容
    const htmlContent = editorState.toHTML();
    // const result = await saveEditorContent(htmlContent);
  }

  return (
    <BraftEditor
      value={editorState}
      onChange={(editorState) => {
        onChange(editorState.toHTML());
        setEditorState(editorState);
      }}
      onSave={() => {}}
    />
  );
}

<CBraftEditor  htmlString={} onChange={(e)=>{
            
            }}></CBraftEditor>

react 解析html字符串
dangerouslySetInnerHTML={{ __html: str }}