效果展示

安装插件

npm install braft-editor   

或者

yarn add braft-editor

主要代码

import React, { useState, forwardRef } from 'react'
//引入富文本编辑器
import BraftEditor from 'braft-editor'
// 引入编辑器样式
import 'braft-editor/dist/index.css'
import { Button } from 'antd'
import store from "./store"function NoConMaintenance(props, ref) {//富文本组件内容const [editorState, setEditorState] = useState<any>(BraftEditor.createEditorState('<p></p>'))/*** @Author: YuKi* @description: 处理富文本框显示数据* @param {Object} editorState 富文本框内容* @return {*}*/const handleEditorState = (editorState) => {console.log("取富文本框里面的内容", editorState.toHTML())setEditorState(editorState) //必须要有这一步store.outputHTML = editorState.toHTML()}return (<><BraftEditorclassName="my-editor"value={editorState}onChange={handleEditorState}contentStyle={{height: 500,boxShadow: 'inset 0 1px 3px rgba(0,0,0,.1)',border: '1px solid black',}}/><div>输出内容</div><div>{store.outputHTML}</div></>)
}export default forwardRef(NoConMaintenance)