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

 

posted @ 2018-05-14 10:08  花开半夏shen  阅读(815)  评论(0编辑  收藏  举报