reactjs - 在反应板编辑器中移动光标

Question

我正在尝试在 react slate-editor 中移动光标。

我尝试以两种方式做到这一点。

第一的：

// 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没有影响光标位置。有人可以帮忙吗？

Answer 1

尝试使用Transform.select结合位置点的方法

将光标放在第三个字母之后

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

移动到最后

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

你也可以试试这个方法Transforms.move。在第 5 个单词后移动光标：

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);

Answer 2

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