引用braft-editor富文本

Mr Ke

2020-04-29 8d69f8151ef345d37dbf41e05f4a5a8082513710

引用braft-editor富文本

 package.json

@@ -8,6 +8,7 @@
    "@testing-library/user-event": "^7.1.2",
    "antd": "^3.26.11",
    "axios": "^0.19.2",
    "braft-editor": "^2.3.9",
    "mocker-api": "^1.9.0",
    "node-sass": "^4.13.1",
    "react": "^16.12.0",

 src/api/httpurl.js

@@ -1,6 +1,6 @@
//内网测试地址
let StagingUrl = 'http://192.168.0.105:9072';
// let StagingUrl = "http://120.79.193.119:9072";
// let StagingUrl = 'http://192.168.0.105:9072';
let StagingUrl = "http://120.79.193.119:9072";


//mock地址

 src/components/page/DocumentDetailPage/index.jsx

@@ -220,18 +220,6 @@
                        <Button disabled={disabled} style={{ display: disabled ? 'none' : 'inline-block' }}>
                          <Icon type="upload" />上传文件</Button>
                      </Upload>
                      <Upload {...props} >
                        <Button disabled={disabled} style={{ display: disabled ? 'none' : 'inline-block' }}>
                          <Icon type="upload" />上传文件</Button>
                      </Upload>
                      <Upload {...props} >
                        <Button disabled={disabled} style={{ display: disabled ? 'none' : 'inline-block' }}>
                          <Icon type="upload" />上传文件</Button>
                      </Upload>
                      <Upload {...props} >
                        <Button disabled={disabled} style={{ display: disabled ? 'none' : 'inline-block' }}>
                          <Icon type="upload" />上传文件</Button>
                      </Upload>
                    </div> : '未上传附件'
                }
              </Col>

 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">

 src/components/page/DocumentEditPage/index.scss

@@ -26,8 +26,23 @@
    & .ant-upload-list-item-name {
      cursor: pointer;
    }
    & .w-e-text p, .w-e-text h1, .w-e-text h2, .w-e-text h3, .w-e-text h4, .w-e-text h5, .w-e-text table, .w-e-text pre{
    & .w-e-text p,
    .w-e-text h1,
    .w-e-text h2,
    .w-e-text h3,
    .w-e-text h4,
    .w-e-text h5,
    .w-e-text table,
    .w-e-text pre {
      margin: 1px 0;
    }
    & .BraftEditor-style {
      border: 1px solid #d9d9d9;
      border-radius: 5px 5px 0 0;
    }
    & .bf-content{
      min-height: 500px;
      height: auto;
    }
  }
}

 src/utils/utils.js

@@ -8,4 +8,9 @@
  s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
  const id = s.join('');
  return id;
}
}

// 去除富文本的特殊标签符号
export function emoveTAG(str) {
  return str.replace(/<[^>]+>/g, '');
}