React富文本框插件 —— braft-editor富文本编辑器使用简介与项目实战

前言 —— 由于公司react项目中需要一个富文本框，所以这几天特意在网上找了一个react可以用的富文本框插件，该插件还是比较实用的功能比较多，使用起来也比较简单

插件名：braft-editor富文本编辑器

安装：
使用npm安装
npm install braft-editor --save

使用yarn安装
yarn add braft-editor

示例代码：

import React from 'react'
// 引入编辑器组件
import BraftEditor from 'braft-editor'
// 引入编辑器样式
import 'braft-editor/dist/index.css'

export default class EditorDemo extends React.Component {

    state = {
        // 创建一个空的editorState作为初始值
        editorState: BraftEditor.createEditorState(null)
    }

    async componentDidMount () {
        // 假设此处从服务端获取html格式的编辑器内容
        const htmlContent = await fetchEditorContent()
        // 使用BraftEditor.createEditorState将html字符串转换为编辑器需要的editorStat
        this.setState({
            editorState: BraftEditor.createEditorState(htmlContent)
        })
    }

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


    // 富文本框输入触发的函数，这里可以拿到富文本框输入的值
    handleChange = (editorState) => {
        this.setState({
            editorState: editorState,
            outputHTML: editorState.toHTML()
        })
        console.log(editorState.toHTML())
    }

    render () {

        const { editorState } = this.state
        return (
            <div className="my-component">
                <BraftEditor
                    value={editorState}
                    onChange={this.handleChange}
                    onSave={this.submitContent}
                />
            </div>
        )

    }

}

如果想要在富文本展示默认的文字然后可以编辑修改（实现文章用富文本编辑的功能）

import React from "react"
import BraftEditor from 'braft-editor'
// 引入编辑器样式
import 'braft-editor/dist/index.css'

export default class ModifyComponent extends React.Component {
    constructor() {
        super(...arguments);
        this.state = {
            outputHTML: ''
        }
    }
    static propTypes = {
    };
    static defaultProps = {
    };

    //富文本框函数
    componentDidMount() {
        let {data} = this.props;
        let { smessage } =data
        this.setState({
            editorState:BraftEditor.createEditorState(smessage)
        })
    }

    render() {
   
        let {id,editorState} = this.state;
        return (
            <div className={s.borderPage}>
         
             {/*富文本编辑框，文章内容区*/}
       		<BraftEditor
            	value={editorState}
              	onChange={this.handleChange}
              />
            </div>
        )
    }


    // 富文本框输入
    handleChange = (editorState) => {
        this.setState({
            editorState: editorState,
            outputHTML: editorState.toHTML()
        })
}

其他更多使用方法以及API请去官网：

链接:
官方文档
配置文档