3

我对作为编辑器的 drafjs 插件有问题，当我在编辑器中输入时，它会跳转到文本的开头。我找到了如何停止 DraftJS 光标跳转到文本的开头？这个解决方案，但它与我的代码有点不同，此外我使用 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 } })
    }
  }
}

例如， 在此处输入图像描述

4

1 回答 1

3

好的，我有点弄清楚自己。但是，这不是最好的解决方案。基本上，我将更新后的文本转换为 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
  }
}
于 2019-01-25T14:07:26.483 回答