ace编辑器光标的行为不正确

Question

我在我的项目中使用Ace编辑器。

CSS：

#editor {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color:white;
}

JavaScript：

var editor = ace.edit("editor");
editor.setTheme("ace/theme/textmate");
editor.getSession().setMode("ace/mode/java");

#editor包含在一个相对定位的div中。

这个问题很难解释，但我会试一试。

每当我在Ace中输入文本时，随着行大小的增加，光标的实际位置和预期位置上的空格也会增加。

例如，当我键入"This is text“时，它显示如下：

This is text           |

现在，当我按退格键时，它将删除行't‘上的最后一个字符，并将显示：

This is tex           |

我已经在谷歌上搜索过这个问题，当缩放设置为120时，chrome浏览器也有类似的问题。但我在火狐浏览器上工作。

Answer 1

Ace只能显示等宽字体，如果将编辑器的字体更改为非等宽字体，或者将不同的字体分配给编辑器的不同部分，都可能发生您描述的问题。

(在ubuntu上有一个firefox插件，它将所有字体都改为非等宽字体)

Answer 2

我同样的问题是这样解决的：

 #editor *{ font-family : monospace !important;font-size: 16px !important;direction:ltr !important;text-align:left !important;}

Answer 3

我正在使用mediawiki + chrome，遇到了同样的错误。

通过使用解决问题

.ace_editor, .ace_editor *{
font-family: "Monaco", "Menlo", "Ubuntu Mono", "Droid Sans Mono", "Consolas", monospace !important;
font-size: 12px !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
}

在Mediawiki:Common.css中