引用braft-editor富文本

Mr Ke

2020-04-29 8d69f8151ef345d37dbf41e05f4a5a8082513710

 src/components/page/DocumentEditPage/index.jsx

@@ -7,13 +7,15 @@
/** Happy Coding */
import React, { ReactNode, ReactEventHandler, Component } from 'react';
import { Card, Row, Col, Select, Button, Input, Upload, Icon, Spin, message } from 'antd';
import E from 'wangeditor';
import './index.scss';
import BraftEditor from 'braft-editor'
const Option = Select.Option;
const { TextArea } = Input;
import './index.scss';
import 'braft-editor/dist/index.css'

import fetch from '../../../api/request';
import { BASE_URL } from '../../../api/httpurl'
import { BASE_URL } from '../../../api/httpurl';
import { emoveTAG } from '../../../utils/utils';

const param = [{ value: 'DT00002', name: '通知公告' }, { value: 'DT00001', name: '规章制度' }]
export default class DocumentEditPage extends Component {
@@ -27,31 +29,17 @@
      saveData: {},//表单提交数据
      fileList: [],//附件列表
      disabled: false,
      editorContent: null//富文本编辑内容
      editorContent: '',//富文本编辑内容
      editorState: BraftEditor.createEditorState(null)
    };
  }

  componentWillMount() { }

  componentDidMount() {
    this.initEditor();
    this.loadData()
  }

  initEditor = () => {
    const elem = this.refs.editorElem
    const editor = new E(elem);
    // 使用 onchange 函数监听内容的变化，并实时更新到 state 中
    editor.customConfig.onchange = html => {
      this.setState({
        editorContent: html,
      })
    }
    editor.customConfig.uploadImgShowBase64 = true;   // 使用 base64 保存图片
    editor.customConfig.showLinkImg = true;  // 隐藏“网络图片”tab
    editor.create();

  }
  loadData = () => {
    const { id } = this.props.match.params;
    console.log(this.props)
@@ -79,7 +67,6 @@
    });
  }


  saveInputChange = ({ target: { value, name } }) => {
    this.setState(({ saveData }) => ({
      saveData: {
@@ -90,12 +77,13 @@
  }

  submit = () => {
    const { saveData, editorContent } = this.state;
    let { saveData, editorContent } = this.state;
    // editorContent = emoveTAG(editorContent);
    console.log(saveData)
    if (!saveData.documentTitle) {
      return message.warning(this.switchWordByType(saveData.documentType).title + '标题不能为空');
    }
    if (!editorContent) {
    if (!emoveTAG(editorContent)) {
      return message.warning('通知内容不能为空');
    }
    let _this = this;
@@ -115,9 +103,8 @@
        iconLoading: false,
      });
      message.success("提交成功！");
      this.props.history.push("/index/rules")
      this.props.history.push(this.switchWordByType(saveData.documentType).href);
    });

  }

  cancle = () => {
@@ -135,14 +122,21 @@
      case 'DT00002':
        return {
          title: '通知',
          associateId: 1001
          associateId: 1001,
          href: '/index/workbench/announcement'
        };
      case 'DT00001':
        return {
          title: '规章制度',
          associateId: 1002
          associateId: 1002,
          href: '/index/rules'
        }
    }
  }

  handleChange = (editorState) => {
    console.log(editorState, editorState.toHTML())
    this.setState({ editorState, editorContent: editorState.toHTML() })
  }

  render() {
@@ -168,28 +162,15 @@
        window.open(file.url);
      },
      showUploadList: { showPreviewIcon: true, showDownloadIcon: false, showRemoveIcon: disabled ? false : true }
      // onDownload: (file) => {
      //   console.log(file)
      //   Fetch.attachmentDownload(file.uid)
      //     .then(res => {
      //       message.success("下载成功！");
      //     });
      // },
      // onRemove: (file) => {
      //   Fetch.deleteAttachment(file.uid)
      //     .then(res => {
      //       message.success("移除成功！");
      //     });
      //   this.setState(({ fileList }) => {
      //     const index = fileList.indexOf(file);
      //     const newFileList = fileList.slice();
      //     newFileList.splice(index, 1);
      //     return {
      //       fileList: newFileList,
      //     };
      //   });
      // }
    };

    const controls = ['undo', 'redo', 'separator',
      'headings', 'separator', 'font-size', 'line-height', 'letter-spacing', 'separator',
      'text-color', 'bold', 'italic', 'underline', 'strike-through', 'separator', 'text-indent', 'text-align', 'separator',
      'list-ul', 'list-ol', 'blockquote', 'code', 'separator',
      'link', 'separator', 'hr', 'separator',
      'media', 'separator', 'remove-styles',
      'clear'];

    return (
      <div className="document-edit-page-main">
@@ -230,9 +211,10 @@
                通知内容：
                </Col>
            </Row>

            {/* 
            <div ref="editorElem" className="marginTB">
            </div>
            </div> */}
            <BraftEditor value={this.state.editorState} onChange={this.handleChange} controls={controls} className="marginTB BraftEditor-style" />

            <Row gutter={16}>
              <Col className="gutter-row marginTop">