Chrome / MacOS 下的 Monaco 编辑器 (Angular) 文本和光标之间的偏移

Question

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

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

版本

有人遇到过这个问题吗？

Answer 1

我在 Windows 上也遇到了同样的问题，最后是字体大小问题！我不太记得了，但类似的东西是基于 font-size: x 计算的，但它显示的是 font-size: y，但仅在 Windows 中。仔细检查您没有在所有 div 或其他东西上使用全局字体大小，并且您的所有字体名称都适用于所有操作系统（例如，确保您不仅使用 Consolas 或其他）。我不得不做

#monacodiv div, #monacoDiffEditor div {
  font-family: monospace;
  font-size: unset; 
}

让它工作，因为在我们的环境中，我们有一个全局

body, td, div, p {
    font-family: Lato, Sans-serif;
    font-size: 10pt;
}

设置让一切都变得糟糕。

Answer 2

我使用的是自定义字体，发现出现此行为是因为 Monaco 编辑器在字体加载之前就已呈现在屏幕上。字体加载并缓存后，该行为就不再发生。

我使用 document.fonts API .

解决了它

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

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

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

Chrome / MacOS 下的 Monaco 编辑器 (Angular) 文本和光标之间的偏移

Offset between text and cursor with the Monaco editor (Angular) under Chrome / MacOS

monaco-editor

angular