antd design pro 4富文本编辑器braft-editor

最新推荐文章于 2025-10-17 04:56:01 发布

原创

最新推荐文章于 2025-10-17 04:56:01 发布 · 1.8k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#reactjs #typescript #antd

该博客介绍了如何在antd design pro 4.0项目中集成并使用braft-editor作为富文本编辑器，提供了文档链接和在React应用中的实现方法。

最近在使用antd design pro 4.0设计知识库版本管理

富文本编辑器选择了 braft-editor

文档地址：https://www.yuque.com/braft-editor/be/lzwpnr

# 使用npm安装
npm install braft-editor --save

# 使用yarn安装
yarn add braft-editor

接下来看如何在react中使用：

import React, { useState } from 'react';
import { Button, notification, Card, Row, Col } from 'antd';

import BraftEditor from 'braft-editor'
import 'braft-editor/dist/index.css'
import 'braft-editor/dist/output.css'
import './style.less'

import HtmlDiff from 'htmldiff-js'

import { PageHeaderWrapper } from '@ant-design/pro-layout';

const DpEditor: React.FC<{}> = () => {
  const [editorState, setContent] = useState<any>(BraftEditor.createEditorState(null));
  const [oldEditorState, setOldContent] = useState<any>(BraftEditor.createEditorState(null));

  const mediaValue = {