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

最近在使用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 = {
    accepts: {
      image: 'image/png,image/jpeg,image/gif,image/webp,image/apng,image/svg',
    }
  }

  const onEditorChange = (newContent: any) => {
    setContent(newContent);
  };

  const prompt = () => {
    const htmlContent = editorState.toHTML()
    notification.open({
      message: 'value:',
      duration: 0,
      description: <div className="braft-output-content" dangerouslySetInnerHTML={{ __html: htmlContent }} />
    });
  };

  const submitContent = async () => {
    // 在编辑器获得焦点时按下ctrl+s会执行此方法
    // 编辑器内容提交到服务端之前，可直接调用editorState.toHTML()来获取HTML格式的内容
    const htmlContent = editorState.toHTML()
    setOldContent(editorState);
    console.log('save', htmlContent)
  }

  return (
    <PageHeaderWrapper title="新建文档">
      <Card>
        <BraftEditor value={editorState}
                     media={mediaValue}
                     onChange={onEditorChange}
                     onSave={submitContent}/>
        <Button style={{marginTop: 16 }} onClick={prompt}>保存</Button>
        <Row>
          <Col span={12}>
            <h1>历史版本</h1>
            <div className="braft-output-content" dangerouslySetInnerHTML={{ __html: oldEditorState.toHTML() }} />
          </Col>
          <Col span={12}>
            <h1>新数据</h1>
            <div className="braft-output-content" dangerouslySetInnerHTML={{ __html: HtmlDiff.execute(oldEditorState.toHTML(), editorState.toHTML()) }} />
          </Col>
        </Row>
      </Card>
    </PageHeaderWrapper>
  )
}

export default DpEditor;