//组件
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 }}
