【后台管理系统】—— Ant Design Pro结合插件（一）

一、富文本braft-editor

• 安装并引用

  npm install braft-editor --save
  
  import BraftEditor from 'braft-editor'
  import 'braft-editor/dist/index.css'
  

• state中初始内容

  editorState: BraftEditor.createEditorState(),
  

• 表单中使用<BraftEditor/>

   <FormItem label="教程正文" {...formLayout}>
          {getFieldDecorator('content', {
                  validateTrigger: 'onBlur',
                  rules: [{
                      required: true,
                      validator: (_, value, callback) => {
                      if (value.isEmpty()) {
                          callback('请输入正文内容')
                      } else {
                          callback()
                      }
                      }
                  }],
                  // 内容必须通过BraftEditor.createEditorState()转化为可读的格式
                  initialValue: current && detail ? BraftEditor.createEditorState(defaultContent(detail.content)) : ''
                  })(
                      <BraftEditor
                          className="my-editor"
                          controls={controls}                         // 按需添加控件按钮
                          extendControls={extendControls}             // 自定义控件按钮
                          placeholder="请输入正文内容"
                          media={
        {                                    // 媒体对象
                              uploadFn: handleUploadFn,               // 上传七牛云服务器获取url
                              validateFn: handleValidateFn,           // 上传文件的限制
                              accepts: {                              //  可上传格式
                                image: 'image/png, image/jpeg, image/jpg, image/gif, image/webp, image/apng, image/svg',
                                video: 'video/mp4',
                                audio: 'audio/mp3, audio/mp4, audio/ogg, audio/mpeg'
                              }
                          }}
                          onChange={this.handleContentChange}         // 内容更改方法
                      />
                  )}
  </FormItem>
  

• 打开弹框时处理获取到的HTML格式的content，转化为插件可读格式，同时字符串切割替换转换后台传来的七牛云前缀与安卓ios视频图片需要的标签处理

  showEditModal = item => {
      const { dispatch } = this.props;
  
      let content = '';
      if(item.content){
        content = item.content;
        let contentObj = JSON.parse(BraftEditor.createEditorState(content).toRAW());
        let urlArr;
        Object.keys(contentObj.entityMap).forEach((key) => {
          if(contentObj.entityMap[key].data.url){
            urlArr = contentObj.entityMap[key].data.url.split('/')
            console.log('编辑时', urlArr)
            if(urlArr.length == 2){  //ios视频前缀yihezo
              urlArr.splice(0,1);
              contentObj.entityMap[key].data.url = `${setFile