突变后丢失选择

IT技术 reactjs draftjs
2021-05-01 00:52:46

我正在对 editorState 进行一些棘手的状态更改,但我失去了选择。

我需要获取 currentText(),使用一些魔法库将其转换为 HTML,然后将其转换回 editorState。效果很好,只是选择太难了。

现在,我试图在第一个开始时进行选择,然后执行forceSelection,但由于一些相关的错误而失败selection.hasFocus()(这似乎并不是真正相关......)。

我猜我需要根据锚点和偏移量计算“新”选择,但不确定,有什么想法可以做到这一点?

现在我的代码看起来像:

// onChangeHandler:

const currentContentState = editorState.getCurrentContent()
const selectionState = editorState.getSelection()

const plainHtml = magicOperation(currentContentState.getPlainText())

const currentContentBlocks = convertFromHTML(plainHtml)
const contentState = ContentState.createFromBlockArray(currentContentBlocks)

const newEditorState = EditorState.createWithContent(contentState)

this.setState({
  editorState: EditorState.forceSelection(
    newEditorState,
    selectionState
  )
})

是一个黑客,我知道我只是在玩 DraftJS 如果我能做到这一点,在我让它工作顺利的情况下,我肯定会使用装饰器在 editorState 中添加 HTML。

谢谢你的时间!

1个回答

所述selectionState包含块密钥(anchorKey&focusKey)。密钥更改是因为您替换了整个块。您需要做的是从偏移量中找到键并将其设置为新的 selectionState,然后再将其应用于新的 editorState。

我很有趣为什么你需要将纯文本转换为 html 并设置回来。