React中使用UEditor

一般UEditor用于表单的新建和编辑

<FormItem {...formItemLayout} label='商品详情'>
　　{getFieldDecorator('detail', {
　　　　rules: [{ required: true, message: '请输入商品详情' }]
　　})(<Ueditor width={692} id="detail" toolbars={videoToolbar} />)}
</FormItem>

id和name要相同

表单提交的时候校验详情是否输入 （因为form.getFieldValue('detail')拿到的值是‘contentChange’，不能作为是否为空的凭证）

if (!getContent('detail')) {
　　form.setFields({
   　　detail: {
       　　value: getContent('detail'),
          errors: [new Error(`请输入${type == 1 ? '音频' : '视频'}详情`)]
      }
   })
}

编辑的时候，需要将内容写入UEditor

edit：是否是编辑页 如果是新建页就不用写入

hasDetail：是否已经渲染好了detail  componentWillReceiveProps会执行好几次 如果不判断是否已经渲染好了detail editor.ready会进入死循环

courseDetail.detail：渲染的数据

componentDidMount和componentWillReceiveProps都要执行相同的步骤  因为在实践过程中发现有少数情况 在进入编辑页或者刷新编辑页时editor不能被成功渲染

componentDidMount() {
    const { courseDetail, edit, hasDetail, dispatch } = this.props
    if (courseDetail.detail && edit && !hasDetail) {
      const editor = getUeditor('detail')
      editor.ready(function() {
        dispatch({
          type: 'courseManagement/saveHasDetail',
          payload: true
        })
        editor.setContent(courseDetail.detail)
      })
    }
  }
  componentWillReceiveProps(nextProps) {
    const { courseDetail, edit, hasDetail, dispatch } = nextProps
    if (courseDetail.detail && edit && !hasDetail) {
      const editor = getUeditor('detail')
      editor.ready(function() {
        dispatch({
          type: 'courseManagement/saveHasDetail',
          payload: true
        })
        editor.setContent(courseDetail.detail)
      })
    }
  }