reactjs - 让DraftJS编辑器由Formik控制 : string value doesn't convert well to EditorState

Question

我使用react-draft-wysiwyg编辑器，它的状态应该由Formik控制。这个想法是 Formik 值是一个字符串，因此编辑器状态会使用 stateToHTML 转换为 HTML 并设置为值，当从 Formik 接收时，it is converted form HTML to EditorState 。由于能够使用 Formik 方法重置表单，来回传递且不受编辑器本身控制的值至关重要。另外，该值需要作为字符串从表单发送，后端不应该知道前端使用哪种编辑器。

问题在于，虽然带有html的字符串与Formik的传递很好，但是更新数据却出错了。更新字符串后，光标返回到编辑器窗口的最开始(输入？)，并将新输入的字符串添加到该字符串前面。看起来我是从右向左打字的。但是，退格键和删除键按预期工作。

Formik 像这里一样使用它

<Field name='wysiwyg' label='Wysiwyg' component={Editor} />

这就是编辑器的设置方式

const setEditorState = (html) => {
  const blocksFromHTML = convertFromHTML(html || '')
  if (blocksFromHTML.contentBlocks !== null) {
    const state = ContentState.createFromBlockArray(
      blocksFromHTML.contentBlocks,
      blocksFromHTML.entityMap
    )
    return EditorState.createWithContent(state)
  }
  return EditorState.createEmpty()
}

class XXX extends react.Component {
onEditorStateChange = (editorState) => {
    const contentState = editorState.getCurrentContent()
    this.props.form.setFieldValue(this.props.field.name, stateToHTML(contentState)) //stateToHTML imported from draft-js-export-html 
  }


render () {
   return (
      <Editor
        editorState={setEditorState(this.props.field.value)}
        onEditorStateChange={this.onEditorStateChange}
        ...
      />
    )
  }
}

Answer 1

以防万一有人仍在寻找将 DraftJS 与 Formik 集成的解决方案。我发现这个非常有用的codesandbox项目可以this .