Сделать редактор DraftJS управляемым Formik: строковое значение плохо конвертируется в EditorState - PullRequest
Новая
       20

Сделать редактор DraftJS управляемым Formik: строковое значение плохо конвертируется в EditorState

0 голосов
/ 09 февраля 2019

Я использую редактор Reaction-draft-wysiwyg, состояние которого должно контролироваться Formik.Идея заключается в том, что значение Formik является строкой, поэтому состояние редактора преобразуется в HTML с помощью stateToHTML и устанавливается в качестве значения, а при получении от Formik оно преобразуется из HTML в EditorState .Значение, которое передается взад и вперед и не контролируется самим Редактором, имеет важное значение из-за возможности сброса формы с помощью методов Formik.Кроме того, значение должно быть отправлено из формы в виде строки, серверная часть не должна знать, какой тип редактора используется во внешнем интерфейсе.

Проблема в том, что, хотя строка с htmlПередано в и из Formik хорошо, данные обновления идут не так.После обновления строки курсор возвращается в самое начало окна редактора (ввод?) И добавляет вновь напечатанную строку перед строкой.Похоже, я печатал справа налево.Однако клавиши Backspace и Delete работают так, как задумано.

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

1 Ответ

0 голосов
/ 05 августа 2019

Просто, если кто-то все еще ищет решение для интеграции DraftJS с Formik.Я нашел этот очень полезный проект codesandbox, который делает this .

...