在React框架中使用Braft Editor集成Table表格的详细教程

news2025/6/2 10:35:53

简介：Braft Editor是一款基于draft-js开发的React富文本编辑器，支持多媒体、自定义样式和扩展功能。其表格扩展模块允许用户插入、调整表格结构，适合需要数据展示的场景（如CMS系统、报表工具）。

1.安装依赖

yarn add braft-editor

yarn add braft-utils

yarn add braft-extensions

或者

# 安装编辑器核心
npm install braft-editor --save
# 安装表格扩展
npm install braft-extensions --save
# 安装插件工具
npm install braft-utils --save

安装好后版本号

    "braft-editor": "^2.3.9",
    "braft-extensions": "^0.1.1",
    "braft-utils": "^3.0.13",

2.安装详细文档教程
安装和使用 · 语雀安装使用npm或者yarn来将本编辑器加入到你的项目中...https://www.yuque.com/braft-editor/be/lzwpnr3.完整示例代码

import React from 'react';
import {message} from 'antd';
// 引入编辑器组件
import BraftEditor from 'braft-editor'
import { ContentUtils } from 'braft-utils'
import 'braft-editor/dist/index.css';// 引入编辑器样式
import 'braft-editor/dist/output.css';// 预览样式（可选）
import Table from 'braft-extensions/dist/table';
import 'braft-extensions/dist/table.css'; // 引入表格样式

export default class EditorDemo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      editorState: BraftEditor.createEditorState(props.dataSource || ''),
      controls: [
        'table', //表格工具
        'font-size', //文字字号选择器
        'font-family', //文字字体选择器
        'line-height', //行高
        'letter-spacing', //字间距
        'text-color', //文字颜色
        'bold', //设置文字加粗
        'italic', //设置文字斜体
        'underline', //设置文字下划线
        'strike-through', //设置文字删除线
        'superscript', //设置文字为上标
        'subscript', //设置文字为下标
        'remove-styles', //清除文字样式
        'emoji', //Emoji表情选择器
        'text-align', //文字对齐方式工具，可通过textAligns属性来指定可以使用哪些对齐方式
        'text-indent', //text-indent	段落缩进工具，最多可缩进6级
        'link', //link	链接插入工具
        'headings', //段落类型（标题1-6、常规）
        'list-ul', //无序列表
        'list-ol', //有序列表
        'blockquote', //引用段落
        'code', //代码块
        'hr', //水平线工具
        'media', //media多媒体插入工具
        'clear', //内容清除工具
        'undo', //撤销操作
        'redo', //重做操作
        'separator', //分割线，连续的多个separator将只显示为1个
      ],
      tableOptions: {
        defaultRows: 2,      // 默认行数
        defaultColumns: 3,   // 默认列数
        withDropdown: true,  // 显示行列选择下拉菜单
        columnResizable: true, // 允许拖动调整列宽
        exportAttrString: 'border="1" style="border-collapse: collapse"', // 输出表格边框
      }
    };
  }
  componentDidMount() {
    const {tableOptions}= this.state;
    BraftEditor.use(Table(tableOptions));
  }

  insertText(str) {
    const newEditorState = ContentUtils.insertHTML(
      this.state.editorState,
      str,
      'paste-html'  // 指定插入模式（避免格式冲突）
    )
    this.setState({ editorState: newEditorState })
  }

  //获取ueditor内容
  getContent() {
    const {editorState} = this.state;
    const htmlContent = editorState.toHTML()
    console.log(htmlContent, '============', this.state.editorState);
    return htmlContent;
  }

  handleEditorChange = (content, editor) => {
    this.setState({editorState: content});
  };

  render() {
    const {dataSource} = this.props;
    const {editorState,controls} = this.state;
    return (
      <div className="my-braeditor">
        <BraftEditor
          placeholder="请输入内容/从wps复制过来"
          controls={controls}
          value={editorState}
          onChange={this.handleEditorChange}
          onSave={this.getContent}
        />
      </div>
    );
  }
}