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

最新推荐文章于 2024-09-07 09:03:29 发布

文先生_

最新推荐文章于 2024-09-07 09:03:29 发布

阅读量2k

点赞数 1

文章标签：前端 react

本文链接：https://blog.csdn.net/weixin_42670455/article/details/107491456

版权

本文档将指导你如何使用React的hooks与Ant Design结合braft-editor，简单创建一个富文本编辑器。内容涵盖官方文档、引入依赖、实现代码以及最终的预览效果展示，特别适合已有React环境的开发者参考。

摘要由CSDN通过智能技术生成

这里就不再搭建 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 (!