?效果展示

安裝插件

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)