ifanrx-react-ueditor编辑器踩的坑

react-ueditor

使用 react 框架对 ueditor 进行封装和扩展(这个是开源的编辑器可以点击下面链接查看官网)
infanrx-react-ueditor
github
✨ 特性
支持更灵活的图片和音视频资源上传
支持同个页面存在多个编辑器实例
支持对复制进来的图片进行操作
允许扩展工具栏，支持在扩展中使用已有的 react 组件

使用 npm 安装

npm install ifanrx-react-ueditor --save

使用 yarn 安装

yarn add ifanrx-react-ueditor
这边主要是遇到了
结合ANTD Form.Item使用时会出现光标一直再最左边的情况
不知道其他小伙伴们有没有跟我遇到的一样问题.
使用Form.Item 是双向绑定的.导致ifanrx-react-ueditor插件光标会一只在左边第一个位置
这个我们就需要处理下了.
我这边采用的是onChange来实时获取插件的值.

<FormItem {...editorItemLayout} label="标题">
              {getFieldDecorator('title', {
                rules: [
                  {
                    required: true,
                    message: '请输入标题',
                  },
                ],
                initialValue: detail.title, //获取默认值 在这里编辑器就无法生效了.
              })
              }
              <div>
              //引入ifanrx-react-ueditor 编辑器插件. 使用onChange来获取编辑器实时的值,然后复制给title.这样就initalValue初始化就可以获取到值了. value 直接给编辑器直接赋值.
                <ReactUeditor {...ueditorCfg} onChange={updateEditorContent} value={detail.title} />
              </div>
            </FormItem>

onChange的方法: 这个主要是通过实时拿到编辑器的值然后赋值给title属性.这样我们就可以直接传值了

const updateEditorContent = content => {
      // 在此获取编辑器最新内容
      this.content = content
     form.setFieldsValue({'title':content})
    }

由于编辑器采用’div’包裹起,所以编辑器就不会被双向绑定,那么光标就不会一直左移了.

这样我们就处理好光标左移的效果了.既能获取到输入的值,也可以显示后台传回来的值.
这个让我一个后端没接触过的来修复确实是困难了点,欢迎小伙伴们指导