BraftEditor富文本编辑器使用

BraftEditor使用总结

这里实现的是，参数管理功能，新建或者编辑的时候会弹出一个Modal。这里使用antdesign实现，然后在里面编辑富文本信息，点击保存提交给后台，或者是取消编辑。如图所示

一.安装
npm install --save @types/braft-editor
二.使用方法
因为是较老的版本，因此很多api在网上已经查找不到了，看了组件的源码，进行简单总结。
①首先初始化是用的initialContent

 <div>
     <BraftEditor {...editorProps} initialContent={settingValue || ''} />
 </div>

 

②配置基本的参数，editorProps，onChange函数用于获取editor里面的内容，并传递给后台。

    const editorProps = {
      height: 350,
      contentFormat: 'html',
      // initialContent: line ? line.introduction : '',
      onChange: this.handleChangeEditor,
      onRawChange: this.handleRawChange,
      media: {
        allowPasteImage: true, // 是否允许直接粘贴剪贴板图片（例如QQ截图等）到编辑器
        image: true, // 开启图片插入功能
        video: true, // 开启视频插入功能
        audio: true, // 开启音频插入功能
        validateFn: null, // 指定本地校验函数，说明见下文
        uploadFn: uploadFn, // 指定上传函数，说明见下文
        removeConfirmFn: null, // 指定删除前的确认函数，说明见下文
        onRemove: null, // 指定媒体库文件被删除时的回调，参数为被删除的媒体文件列表(数组)
        onChange: null, // 指定媒体库文件列表发生变化时的回调，参数为媒体库文件列表(数组)
        onInsert: null, // 指定从媒体库插入文件到编辑器时的回调，参数为被插入的媒体文件列表(数组)
      },
    }

 

 

③此功能实现的是弹出一个Modal框里面展示富文本，因此需要在每次打开Modal框的时候做重置内容的操作，在这里因为使用的initialValue只能设置一次，因此改变富文本内容的时候，使用的this.refs.braft，并调用setContent()方法。

  showModelHandler = (e) => {
    if(this.refs.braft){
      this.refs.braft.setContent(this.props.record.settingValue || '<p></p>')
    }
    this.setState({
      visible: true,
    });
  };

 

三.完整代码

/*此部分代码是由上一个父页面引入的子组件，作用是弹出Modal框，来编辑参数名称和参数值*/
import React, { Component } from 'react';
import { Modal, Form, Input, message } from 'antd';
import { connect } from 'dva';
import style from '../Part/generalstyle.less';
import BraftEditor from 'braft-editor'
import 'braft-editor/dist/braft.css'


const FormItem = Form.Item;

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 7 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 12 },
    md: { span: 5 },
  },
};
@connect(state => ({
  history: state.getData,
}))
class AddFusSystemParam extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      contentEditor: '',
    };
  }

  showModelHandler = (e) => {
    if(this.refs.braft){
      this.refs.braft.setContent(this.props.record.settingValue || '<p></p>')
    }
    this.setState({
      visible: true,
    });
  };

  hideModelHandler = () => {
    this.props.form.resetFields();
    this.setState({
      visible: false,
    });
  };

  okHandler = () => {
    const { onOk } = this.props;
    this.props.form.validateFields((err, values) => {
      if (!err) {
        if (typeof (values.settingName) == "undefined" || values.settingName == null) {
          values.settingName = '';
        }
        if (values.id == '') {
          delete values.id;
        }
        if ((!this.state.contentEditor) || (this.state.contentEditor == '<p></p>')) {
          message.error("请添加参数值");
          return;
        }
        else {
          values.settingValue = this.state.contentEditor;
        }
        var data = Object.keys(values)
          .map(k => encodeURIComponent(k) + '=' + encodeURIComponent(values[k]))
          .join('&');
        onOk(data);
        this.hideModelHandler();
      }
    });
  };
  handleChangeEditor = (content) => {
    this.setState({
      contentEditor: content,
    });
  }
  handleRawChange = (rawContent) => {
    console.log(rawContent);
  }
  render() {
    const { children } = this.props;
    const { getFieldDecorator } = this.props.form;
    const { id, settingName, settingValue } = this.props.record;
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
    };
    const uploadFn = (param) => {

      const serverURL = '/hyapi/resource/video/upload'

 const xhr = new XMLHttpRequest();

    const fd = new FormData();

    const successFn = response => {

      const { code, data, message: msg } = JSON.parse(xhr.responseText);

      if (code !== 0) {

        message.error(msg);

        return;

      }

      const { localUrl = '', id = 0, title = '' } = data;

      

      // 假设服务端直接返回文件上传后的地址

      // 上传成功后调用param.success并传入上传后的文件地址

      param.success({

        url: '/'+localUrl,

        meta: {

          id,

          title,

          alt: title,

          loop: true, // 指定音视频是否循环播放

          autoPlay: true, // 指定音视频是否自动播放

          controls: true, // 指定音视频是否显示控制栏

          poster: '', // 指定视频播放器的封面

        },

      });

    };

    const progressFn = event => {

      // 上传进度发生变化时调用param.progress

      param.progress((event.loaded / event.total) * 100);

    };

    const errorFn = response => {

      // 上传发生错误时调用param.error

      param.error({

        msg: 'unable to upload.',

      });

    };

    xhr.upload.addEventListener('progress', progressFn, false);

    xhr.addEventListener('load', successFn, false);

    xhr.addEventListener('error', errorFn, false);

    xhr.addEventListener('abort', errorFn, false);

    fd.append('uploadFile', param.file);

    fd.append('uploadFile', 'richText');

    xhr.open('POST', serverURL, true);

    xhr.send(fd);

      };
  
      const progressFn = (event) => {
        // 上传进度发生变化时调用param.progress
        param.progress(event.loaded / event.total * 100)
      };
  
      const errorFn = (response) => {
        // 上传发生错误时调用param.error
        param.error({
          msg: 'unable to upload.',
        });
      };
  
      xhr.upload.addEventListener("progress", progressFn, false);
      xhr.addEventListener("load", successFn, false);
      xhr.addEventListener("error", errorFn, false);
      xhr.addEventListener("abort", errorFn, false);
  
      fd.append('files', param.file);
      xhr.open('POST', serverURL, true);
      xhr.send(fd);
  
    };
  
    const editorProps = {
      height: 350,
      contentFormat: 'html',
      // initialContent: line ? line.introduction : '',
      onChange: this.handleChangeEditor,
      onRawChange: this.handleRawChange,
      media: {
        allowPasteImage: true, // 是否允许直接粘贴剪贴板图片（例如QQ截图等）到编辑器
        image: true, // 开启图片插入功能
        video: true, // 开启视频插入功能
        audio: true, // 开启音频插入功能
        validateFn: null, // 指定本地校验函数，说明见下文
        uploadFn: uploadFn, // 指定上传函数，说明见下文
        removeConfirmFn: null, // 指定删除前的确认函数，说明见下文
        onRemove: null, // 指定媒体库文件被删除时的回调，参数为被删除的媒体文件列表(数组)
        onChange: null, // 指定媒体库文件列表发生变化时的回调，参数为媒体库文件列表(数组)
        onInsert: null, // 指定从媒体库插入文件到编辑器时的回调，参数为被插入的媒体文件列表(数组)
      },
    }

    return (
      <span>
        <span onClick={this.showModelHandler}>
          {children}
        </span>
        <Modal
          title="编辑区域"
          visible={this.state.visible}
          onOk={this.okHandler}
          onCancel={this.hideModelHandler}
          width="60%"
        >
          <Form layout='horizontal' onSubmit={this.okHandler} className={style.ctmodal}>
            <FormItem
            >
              {
                getFieldDecorator('id', {
                  initialValue: id || '',
                })(<Input type='hidden'  style={{ width: 200}}/>)
              }
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="参数名称"
            >
              {
                getFieldDecorator('settingName', {
                  initialValue: settingName || '',
                  rules: [{ required: true, message: '请输入参数名称' }],
                })(<Input disabled={this.props.disabled} />)
              }
            </FormItem>

            <FormItem
              {...formItemLayout}
              label="参数值"
            >
              <div>
                <BraftEditor {...editorProps} initialContent={settingValue || ''} />
              </div>
            </FormItem>
            </Form>

        </Modal>
      </span>
    );
  }
}
export default Form.create()(AddFusSystemParam);