史上最简单 React（reactHooks）+ braft-editor 扩展表格

衔接上一篇博客进行扩展：点击跳转

一、扩展来源

详情文档：点击跳转

二、引入依赖

yarn add braft-extensions（推荐使用）
或者
npm install --save braft-extensions

三、代码

import React, {useState} from 'react'
import {Button, Divider, Upload} from 'antd'
import {EyeOutlined, FileImageOutlined} from '@ant-design/icons'
import BraftEditor from 'braft-editor'
import {ContentUtils} from 'braft-utils'
import Table from 'braft-extensions/dist/table'

import 'braft-editor/dist/index.css'
import 'braft-extensions/dist/table.css'

// 输出表格默认不带边框，如果需要边框，设置参数exportAttrString为'border="1" style="border-collapse: collapse"'
const options = {
    defaultColumns: 5, // 默认列数
    defaultRows: 5, // 默认行数
    withDropdown: true, // 插入表格前是否弹出下拉菜单
    columnResizable: true, // 是否允许拖动调整列宽，默认false
    exportAttrString: '', // 指定输出HTML时附加到table标签上的属性字符串
    // includeEditors: ['id-1'], // 指定该模块对哪些BraftEditor生效，不传此属性则对所有BraftEditor有效
    // excludeEditors: ['id-2']  // 指定该模块对哪些BraftEditor无效
};

const Editor = () => {
    const [content, setContent] = useState(BraftEditor.createEditorState(null));
    const [outputHTML, setOutputHTML] = useState(null);
    BraftEditor.use(Table(options));

    const handleChange = (v) => {
        setContent(v);
        setOutputHTML(v.toHTML())
    };

    const uploadHandler = (param) => {
        if (!param.file) {
            return false
        }

        setContent(ContentUtils.insertMedias(content, [{
            type: 'IMAGE',
            // url: URL.createObjectURL
            url: 'http://wx2.sinaimg.cn/large/705793b8gy1g503pv9yazj20jy0imgmf.jpg'
        }]));
    };

    const preview = () => {
        if (window.previewWindow) {
            window.previewWindow.close()
        }

        window.previewWindow = window.open();
        window.previewWindow.document.write(buildPreviewHtml());
        window.previewWindow.document.close()
    };

    const buildPreviewHtml = () => {
        return `
              
              
                
                  
                  
                
                
                  
${content.toHTML()}
                
              
        `;
    };

    const extendControls = [
        {
            key: 'custom-button',
            type: 'component',
            component: (
                
                    
                
            ),
        },
        {
            key: 'antd-uploader',
            type: 'component',
            component: (
                
                    
                        
                    
                
            )
        }
    ];

    return (
        <>
            

                

                    
                
                
                

                    
源码：
                    

                        {outputHTML}
                    
                
            
        
    );
};

export default Editor;

四、效果图