如何在输入 React Hooks 时阻止 Editor DraftJS 光标跳到文本的开头？答案

【问题标题】：How to stop Editor draftJS cursor jumping to beginning of text while typing in React Hooks?如何在输入 React Hooks 时阻止 Editor DraftJS 光标跳到文本的开头？
【发布时间】：2019-06-10 16:02:02
【问题描述】：

我的问题是drafjs插件是编辑器，当我在编辑器中输入时它会跳转到文本的开头。我找到了How to stop DraftJS cursor jumping to beginning of text? 这个解决方案，但它与我的代码中的有点不同，此外我使用 React Hooks 的新功能制作了组件。拜托，你能帮我解决这个问题吗？

import {
  EditorState, ContentState, convertToRaw,
} from 'draft-js'
import { Editor } from 'react-draft-wysiwyg'
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
import draftToHtml from 'draftjs-to-html'
import htmlToDraft from 'html-to-draftjs'

export default ({ value, onChange }) => {
  const [editorState, setEditorState] = useState(EditorState.createEmpty())

  useEffect(() => {
    setEditorState(
      EditorState.push(
        editorState,
        ContentState.createFromBlockArray(
          htmlToDraft(value || ''),
        ),
      ),
    )
  }, [value])

  return (
    <div className="rich-editor">
      <Editor
        editorState={editorState}
        onEditorStateChange={onEditorStateChange}
        toolbar={{
          options: ['inline'],
          inline: {
            options: ['bold', 'italic', 'underline'],
          },
        }}
      />
    </div>
  )

  function onEditorStateChange(es) {
    setEditorState(es)

    const html = draftToHtml(convertToRaw(es.getCurrentContent()))
    if (value !== html) {
      onChange({ target: { name: 'text', value: html } })
    }
  }
}

例如，

【问题讨论】：

请考虑不要使用react-draft-wysiwyg，因为社区支持很少。
@JiangYD 好的，谢谢

标签： reactjs react-hooks react-draft-wysiwyg

【解决方案1】：

好吧，我有点想明白了。但是，这不是最好的解决方案。基本上，我将更新后的文本转换为 Html 类型，然后将值与转换后的 darft.js editorState 进行比较。很快，这是我的代码，如果它对将来的任何人有帮助

import React, { useEffect, useState } from 'react'
import {
  EditorState, ContentState, convertToRaw,
} from 'draft-js'
import { Editor } from 'react-draft-wysiwyg'
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
import draftToHtml from 'draftjs-to-html'
import htmlToDraft from 'html-to-draftjs'

export default ({ value, onChange }) => {
  const [editorState, setEditorState] = useState(EditorState.createEmpty())

  useEffect(() => {
    if (toHtml(editorState) === value) return //added

    setEditorState(
      EditorState.push(
        editorState,
        ContentState.createFromBlockArray(
          htmlToDraft(value || ''),
        ),
      ),
    )
  }, [value])

  return (
    <div className="rich-editor">
      <Editor
        editorState={editorState}
        onEditorStateChange={onEditorStateChange}
        toolbar={{
          options: ['inline'],
          inline: {
            options: ['bold', 'italic', 'underline'],
          },
        }}
      />
    </div>
  )

  function onEditorStateChange(es) {
    setEditorState(es)
    const html = toHtml(es) //added
    if (value !== html) {
      onChange({ target: { name: 'text', value: html } })
    }
  }

  function toHtml(es) {
    return draftToHtml(convertToRaw(es.getCurrentContent())) // added
  }
}

【讨论】：