在反應板編輯器中移動 cursor

Question

我正在嘗試在 react slate-editor 中移動 cursor。

我嘗試以兩種方式做到這一點。

第一的：

// This code saving key in offset in variables
const nativeSelection = this.getSelectedText();
const nativeRange = nativeSelection.getRangeAt(0);
    const range = findRange(nativeRange, this.editor);
const offset = nativeRange.endOffset;
const key = range.anchor.key;

// OnChange is triggered by running the next line and cursor moves back
this.editor.blur();

// Trying to move to the cursor
this.editor.moveTo(key, offset);

第二：

const nativeSelection = this.getSelectedText();
const nativeRange = nativeSelection.getRangeAt(0);
const range = findRange(nativeRange, this.editor);
const clonedRange = _.cloneDeep(range);

// OnChange is triggered by running the next line and cursor moves back
this.editor.blur();

// Trying to move the cursor
this.editor.select(clonedRange);

不幸的是， select和moveTo似乎不會影響 cursor position。 有人可以幫忙嗎？

Answer 1

如果您使用的是最新版本的 Slate.js，您可以使用 Transforms.move(editor, { options })

Answer 2

嘗試結合位置點使用Transform.select方法

將 cursor 放在第三個字母之后

Transforms.select(editor, {path: [0, 0], offset: 3});

移動到最后

Transforms.select(editor, Editor.end(editor, []));

您也可以嘗試Transforms.move方法。 在第 5 個字之后移動 cursor：

Transforms.move(editor, {distance: 5, unit: 'word'});

或結束這一行：

Transforms.move(editor, {distance: 1, unit: 'line'});

還值得注意的是，在我的情況下，我必須在設置編輯器值后在 setTimeout 中運行轉換。 例子：

setValue(content);
setTimeout(() => {
   Transforms.move(editor, {distance: 1, unit: 'line'});
}, 20);