史上最简单 React（reactHooks）+ Antd + braft-editor 富文本编辑器

这里就不再搭建 react 环境了，默认大家都有环境了

一、官方文档

详情文档: 点击跳转

二、 引入依赖包

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

三、代码

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 'braft-editor/dist/index.css'

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

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

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

        setContent(ContentUtils.insertMedias(content, [{
            type: 'IMAGE',
            // 这里的 url 替换为实际调用上传 API 返回的图片链接
            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;

四、效果图

支持文案编辑 图片上传 预览效果