1

我目前正在开发一个石板文本编辑器，用户可以在其中添加图像和文本。我还想要一个悬停工具栏，根据用户选择的元素类型提供不同的按钮。

例如，如果用户选择了一张图片，那么我想提供一组按钮。如果用户选择了一个段落，我想提供另一组按钮。

查看此处找到的示例后：

https://www.slatejs.org/examples/richtext

我拼凑了一个我想要的文本编辑器的粗略示例，没有依赖于上下文的悬停工具栏按钮：

https://codesandbox.io/s/suspicious-pine-lrxgw

但是我正在努力弄清楚如何检测在编辑器中选择了哪种类型的元素？我不知道是否有办法使用 slate-react 做到这一点？甚至在香草JS中？

理想情况下，我还可以获得有关该元素的其他信息。例如图像的高度和宽度，因为这将有助于造型。

任何帮助表示赞赏

4

1 回答 1

4

您可以使用编辑器中的属性获取当前焦点节点，该selection属性是Range。然后使用anchor或focus选择当前选定的子项。

anchor&focus是点，基本上是一个数组，第一项是当前块，第二项表示块中的位置。

点对象指的是 Slate 文档中文本节点中的特定位置。它的路径是指节点在树中的位置，它的偏移量是指到节点文本字符串的距离。点只能指文本节点。

使用选择数组，我们可以像这样获取当前选定的块

if (selection !== null && selection.anchor !== null) {
  selected = editor.children[selection.anchor.path[0]];
} else {
  selected = null;
}

稍后在您的渲染功能中，您可以检查以渲染您想要的内容。

于 2020-03-16T16:16:58.533 回答