VSCode扩展：如何在编辑器区域嵌入图片

Question

我想为VSCode编写一个扩展程序，可以在你正在编辑的文本文件中搜索特定单词，并将该单词替换为编辑器视图中的图像。一旦你点击图片，它应该转换回原始文本，并像通常一样变得可编辑。

我很希望这是可能的，但是发现VSCode不允许直接操作DOM后，我有所疑虑。

请问有没有人能够给我一些文档资料，使我能够向编辑器窗口添加图像？（而不是左侧的行号区域）

非常感谢您的帮助！

- dustinroepsch

---

更新：https://github.com/microsoft/vscode/pull/66418，现已实现。 - tejasvi88

Answer 1

VSCode不支持自定义UI，但文本装饰器可能适用于您的情况。这是一个示例扩展程序，显示如何使用它们：https://github.com/Microsoft/vscode-extension-samples/tree/master/decorator-sample

要使用装饰器显示图像，请尝试ThemableDecorationAttachmentRenderOptions上的contentIconPath

- Matt Bierner

---

你能在文本后面创建一个画布吗？我有一个扩展的想法，但如果不可能的话，我不知道是否应该尝试 :/ - koral

不可以，扩展程序无法访问编辑器 DOM 以插入画布或其他元素。 - Matt Bierner

根据您最后的评论，我猜想实现这样的东西是不可能的 https://twitter.com/giuseppegurgone/status/1108991817024983041 对吗？扩展的代码块将是另一个编辑器视图，显示依赖项的内容。 - G.G.

Answer 2

由于我一直想要拥有这个解决方案，所以我刚刚创建了一个VS Code扩展。虽然VS Code不允许内联图片，但它可以在工具提示中显示它们。这对于代码文档也非常有用。

https://marketplace.visualstudio.com/items?itemName=mgiesen.image-comments

- gear