Question

我正在尝试将Draft.js编辑器集成到一个项目中。我正在考虑使用它的方法是在每次渲染调用时从我自己的状态创建一个新的EditorState（这种方法的原因与我的特定上下文有关，我在这里不详述）。

我没有成功的是在编辑器中设置光标位置。

我在Codepen上创建了一个示例： http://codepen.io/nutrina/pen/JKaaOo?editors=0011

在此示例中，我输入的任何字符都预先添加到文本的开头，而不是插入光标位置。我尝试使用：

设置光标

  state = EditorState.acceptSelection(state, this.state.selectionState);
  state = EditorState.forceSelection(state, this.state.selectionState);

但没有太大的成功。任何帮助将不胜感激。

谢谢，杰拉德

Answer 1

一种简单的移动光标的方法是使用Editor.forceSelection和key binding function！

设置好后，渲染功能就会变成这样

render() {
    return (
      <Editor
        editorState={this.state.editorState}
        onChange={this.onChange}
        handleKeyCommand={this.handleKeyCommand}
        keyBindingFn={this.myKeyBindingFn}
      />
    );
  }

有了键绑定功能后，您可以按照以下步骤进行操作

  myKeyBindingFn = (e) => {
    // on spacebar
    if (e.keyCode == 32) {
      const newSelection = selectionState.merge({
        anchorOffset: selectionState.getAnchorOffset() + 1,
        focusOffset: selectionState.getAnchorOffset() + 1,
      });

      const newEditorState = EditorState.forceSelection(
        editorState,
        newSelection,
      );

      this.setState({ editorState: newEditorState });

      return 'space-press';
    }
  };

随意用您希望光标所处的位置替换anchorOffset和focusOffset。使用键绑定功能可以更好地控制事件

您的handleKeyCommand函数看起来像这样

handleKeyCommand = (command: string): DraftHandleValue => {
    if (command === 'space-press') {
      return 'handled';
    }
    return 'not-handled';
  };

无法在Draft.js编辑器中设置光标

1 个答案: