富文本braftEditor

import React, { Component } from 'react';
import { Card, Row, Col, Empty } from 'antd';
import BraftEditor from 'braft-editor';
import 'braft-editor/dist/index.css';
import styles from './index.less';

/**
 * 富文本编辑器
 * 使用说明：1、使用BraftEditor.createEditorState将html字符串转换为编辑器需要的editorState
 * 使用说明：2、编辑器内容提交到服务端之前，可直接调用editorState.toHTML()来获取HTML格式的内容
 */
class BraftEditorPage extends Component {
  state = {
    // 创建一个空的editorState作为初始值
    editorState: BraftEditor.createEditorState(null),
  };

  handleEditorChange = editorState => {
    this.setState({ editorState });
  };

  render() {
    const { editorState } = this.state;
    const excludeControls = [
      'letter-spacing',
      'line-height',
      'clear',
      'headings',
      'list-ol',
      'list-ul',
      'remove-styles',
      'superscript',
      'subscript',
      'hr',
      'text-align',
      'blockquote',
      'code',
      'text-indent',
      'strike-through',
      'redo',
    ];
    return (
      <Card>
        <Row gutter={24}>
          <Col span={12}>
            <div style={{ border: '1px solid #00000033' }}>
              <BraftEditor
                value={editorState}
                onChange={this.handleEditorChange}
                excludeControls={excludeControls}
              />
            </div>
          </Col>
          <Col span={12}>
            <Card title="实时预览" type="inner" style={{ border: '1px solid #00000033' }}>
              {editorState.toHTML() === '<p></p>' ? (
                <Empty />
              ) : (
                <div
                  className={styles.content}
                  dangerouslySetInnerHTML={{ __html: editorState.toHTML() }}
                />
              )}
            </Card>
          </Col>
        </Row>
      </Card>
    );
  }
}

export default BraftEditorPage;

less

.content {
  p {
    margin-top: 0;
    margin-bottom: 0;
  }
}
.view {
  font-size: 20px;
  font-weight: 700;
  margin-top: 8px;
  margin-bottom: 8px;
}