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)
      })
    }
  }

猜你喜欢