3

我正在尝试将 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);

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

谢谢，杰拉德

4

1 回答 1

0

移动光标的一种简单方法是使用Editor.forceSelection和键绑定功能！

这就是你的渲染函数设置后的样子 

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';
  };
于 2018-11-19T18:29:09.907 回答