当前位置：首页 > news >正文

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

news 2025/6/1 14:46:40

简介：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"><BraftEditorplaceholder="请输入内容/从wps复制过来"controls={controls}value={editorState}onChange={this.handleEditorChange}onSave={this.getContent}/></div>);}
}