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           |

我在Google上搜索过此问题，当缩放设置为120时，Chrome浏览器发现了类似的问题。但我正在使用Firefox浏览器。

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

ace编辑器光标行为不正确

3 个答案: