时间戳

首页 > 解决方案 > 在 Chrome / MacOS 下使用 Monaco 编辑器 (Angular) 在文本和光标之间进行偏移

angular - 在 Chrome / MacOS 下使用 Monaco 编辑器 (Angular) 在文本和光标之间进行偏移

问题描述

在 Angular 应用程序中使用编辑器，我们可以看到文本和光标之间的偏移。例如，如果我们要擦除光标所在位置的一个字符，则删除之前两个或三个位置的字符。

这仅在 MacOS 下使用 Chrome 时才会发生。对于 MacOS 上的 Firefox / Safari 和 Linux 上的 Chrome / Firefox，我们没有这种行为。我正在使用版本0.18.1。

有人遇到这个问题吗？

标签： angularmonaco-editor

解决方案

我正在使用自定义字体，发现该行为是因为 Monaco 编辑器在字体有时间加载之前呈现在屏幕上。一旦字体加载并被缓存，该行为就不再发生。

我通过使用document.fonts API解决了它。

我在摩纳哥编辑器渲染后添加了以下内容：

document.fonts.ready.then(() => {
  monaco.editor.remeasureFonts()
})

这样，如果在 Monaco 编辑器渲染后字体完成加载，字体将被重新测量，确保编辑器内容中没有偏移。

推荐阅读