问题描述

问题描述：如上图所示，当点击行后面的空白处，光标没有紧挨着逗号定位，而是中间空出了一段空白。这导致当关闭定位到冒号（:）,再按键盘Backspace键，删除的不是冒号，而是删除了前面的字母。

技术盲点：等宽字体

排查中涉及的技术盲点：等宽字体

等宽字体（monospaced font）：是指字符宽度相同的电脑字体。

在排查过程中，有的会出现这个问题是因为用户本地没有vue2-ace-editor组件使用到的那些等宽字体， 导致计算光标位置错误。此时可以通过下载等宽字体，自定义等宽字体避免这个问题。

如何自定义字体：

1. 先下载等宽字体： www.jetbrains.com/lp/mono/
2. 使用@font-face自定义字体

@font-face { 
  font-family: 'JetBrainsMono-Regular' ;
  src: url(fonts/Monaco.ttf) format("truetype"); 
  font-weight: normal; 
  font-style: normal; 
}

3. 应用自定义字体

div {
  font-family: 'JetBrainsMono-Regular' ;
}

问题根源

vue2-ace-editor组件内部样式被外部样式污染，

white-space: normal;导致制表符TAB没有显示。

如上图所示，ace-line设置的white-space: pre被覆盖。

我的解决办法如下：

<style scoped>
>>> .ace_line {
  white-space: pre;
}
</style>