富文本braft-editor插件分享

 效果展示

安装插件

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 (
        <>
            <BraftEditor
                className="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)