您如何在 Monaco 编辑器中处理来自 IViewZone 的输入事件？

Question

如果你试试这个摩纳哥游乐场：

https://microsoft.github.io/monaco-editor/playground.html#interacting-with-the-editor-listening-to-mouse-events

并将其添加到第 36 行以设置插入的浅绿色IViewZone的 HTML：

domNode.innerHTML = '<a href="https://www.microsoft.com/">Microsoft</a>';

您将看到该链接不可点击。 这是无法在 DOM 节点上获取输入事件的更普遍问题的简化再现。 例如，您可以为mousemove调用addEventListener() 。 在domNode上click等，但即使您可以看到它存在于 Chrome DevTools 中，您的处理程序也永远不会被调用。

请注意，VS Code 本身具有非常丰富的IViewZone实现，例如 Show References 的“peek”视图。 该视图甚至支持滚动！ 因此，获取这些输入事件似乎是可能的，但从文档中并不是很明显。

可以使用编辑器自己的onMouseDown()方法（如操场底部所示），然后委托给适当的目标，尽管这似乎不是 VS Code 正在做的事情。

Answer 1

视图区中的链接不可点击的原因是整个视图区都在视图线（源代码）下呈现，这意味着整个视图区不可点击。 要呈现用户可以与之交互的元素，应使用contentWidget 。

VS Code 中的 peek 视图是一个视图区域（它在视图行之间创建空白）和它上面的内容小部件，您可以与之交互。 它们被放置在相同的位置，因此用户不会看到内容小部件后面的视图区域。

在monaco playground 中，将第 52 行更改为this.domNode.innerHTML = '<a target="_blank" href="https://www.microsoft.com/">Microsoft</a>'; 并再次运行示例，您可以单击该链接并打开一个新选项卡。