好用的React富文本编辑器(Braft Editor)及取色器、表格的应用

outstanding木槿

已于 2023-11-17 15:25:03 修改

阅读量3.9k

点赞数 1

分类专栏： react+antd组件文章标签：前端前端框架 react.js javascript

于 2023-10-08 16:44:02 首次发布

本文链接：https://blog.csdn.net/qq_47305413/article/details/133685334

版权

react+antd组件专栏收录该内容

31 篇文章 0 订阅

订阅专栏

官网

http://braft.margox.cn/

一、用法

1、安装

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

# 使用yarn安装
yarn add braft-editor

2、使用（图片供参考）

编辑器支持value和onChange属性

汇总代码：

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

import ColorPicker from 'braft-extensions/dist/color-picker' // 引入富文本高级取色器
import 'braft-extensions/dist/color-picker.css'

import Table from 'braft-extensions/dist/table' // 引入富文本表格功能


// 使用的类组件写法
export default class EditorDemo extends React.Component {

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

    // 3. 富文本
    handleEditorChange = (e) => {
        this.setState({ editorState: e })
    }

    // 4. 当涉及到关闭弹窗
    closeModal = () => {
        this.setState({ 
            editorState: BraftEditor.createEditorState(null),
        })
    }


    // 5. 当涉及到提交
    submit = () => {
        const { editorState } = this.state;
        this.props.form.validateFields((err, values) => {
            if(!err){
                // 修改values里content的值；  toHTML()表示转成HTML形式传给后端
                values.content = editorState.toHTML();
                // 调接口
                axios.post('后端给的地址', {values}).then(res => {
                    if(res.data === 200){
                        
                    } else {
                        message.error(res.message)
                    }
                })
            }
        })
    }



    render () {
        BraftEditor.use(Table(options)) // 表格
        const options = {
            defaultRows: 1, // 默认行数
            defaultColumns: 2,  // 默认列数
            withDropdown: true, // 插入表格前是否弹出下拉菜单
            columnResizable: true, // 是否允许拖动调整列宽， 默认false
            exportAttrString: 'border="1" style="border-collapse: collapse", ', // 指定输出HTML时附加到table标签上的属性字符串
        }

        BraftEditor.use(ColorPicker(color)) // 表格
        const color = {
            theme: 'light', // 指定取色器样式主题，有dark和light
        }

        const { editorState } = this.state
        return (
            <div className="my-component">
                // 2. 使用
                <BraftEditor
                    className={styles.editorStyle}
                    placeholder='请输入内容！'
                    // value={editorState}
                    onChange={e => this.handleEditorChange(e)}
                    excludeControls={['media', 'emoji']} // 媒体，表情 不展示在编辑器里
                    style={{
                        border: 'solid 1px rgb(0,0,0,0.2)',
                        height: '360px',
                    }}
                />
            </div>
        )

    }

}

二、富文本编辑器（添加表格）

// 增加：

import Table from 'braft-extensions/dist/table' // 引入富文本表格功能

BraftEditor.use(Table(options)) // 表格
        const options = {
            defaultRows: 1, // 默认行数
            defaultColumns: 2,  // 默认列数
            withDropdown: true, // 插入表格前是否弹出下拉菜单
            columnResizable: true, // 是否允许拖动调整列宽， 默认false
            exportAttrString: 'border="1" style="border-collapse: collapse", ', // 指定输出HTML时附加到table标签上的属性字符串
        }

控制表格的单元格大小

三、富文本编辑器（添加自定义颜色）

import ColorPicker from 'braft-extensions/dist/color-picker' // 引入富文本高级取色器
import 'braft-extensions/dist/color-picker.css'

BraftEditor.use(ColorPicker(color)) // 表格
        const color = {
            theme: 'light', // 指定取色器样式主题，有dark和light
        }