Select editorState 中的特定文本

Question

我正在使用 draftjs. Here is the minimal codesandbox 创建富文本编辑器，因此您可以了解问题所在。

所以我有一个辅助函数 getCurrentTextSelection return 我正在选择的文本：

const getCurrentTextSelection = (editorState: EditorState): string => {
  const selectionState = editorState.getSelection();
  const anchorKey = selectionState.getAnchorKey();
  const currentContent = editorState.getCurrentContent();
  const currentContentBlock = currentContent.getBlockForKey(anchorKey);
  const start = selectionState.getStartOffset();
  const end = selectionState.getEndOffset();
  const selectedText = currentContentBlock.getText().slice(start, end);

  return selectedText;
};

当我在 TextEditor 外部单击时，焦点丢失，因此文本未被选中（但为 editorState 保留选中的文本）。

是否有使用 editorState 重新选择此文本的编程方式？这样当您单击 Select text again 按钮时，文本编辑器中的文本就会被选中。

Answer 1

我相信您要做的是将焦点恢复到编辑器。如果您所做的只是在编辑器外部单击，则选择状态不会改变（这就是您选择的文本保持不变的原因）。如果您随后恢复焦点，相同的选择将再次可见，而 editorState.

没有任何变化

Draft.js 有一些关于如何执行此操作的文档：https://draftjs.org/docs/advanced-topics-managing-focus/

Editor 组件本身有一个 focus() 方法，如您所料，该方法可以将焦点恢复到编辑器。您可以使用 ref:

访问组件实例

const editorRef = React.useRef<Editor>(null)

const selectAgain = () => {
  editorRef.current.focus()
};

然后将 ref 连接到组件并将点击处理程序添加到按钮：

<div>
  <Editor
    editorState={editorState}
    onChange={onEditorStateChange}
    placeholder={placeholder}
    ref={editorRef} // added ref
  />

  <h2>Selected text:</h2>
  <p>{getCurrentTextSelection(editorState)}</p>

  // added click handler
  <button onClick={selectAgain}>Select text again</button> 
</div>

完整示例：https://codesandbox.io/s/flamboyant-hill-l31bn

Answer 2

也许你可以将 selectedText 存储到 EditorState 使用

EditorState.push( editorState, contentState, changeType)

More Info

Select editorState 中的特定文本

Select specific text in the editorState

javascript

typescript

reactjs

draftjs