ace 编辑器光标行为不正确

Posted 2023-05-07

【中文标题】ace 编辑器光标行为不正确

【英文标题】：ace editor cursor behaves incorrectly

【发布时间】：2013-02-17 10:44:26

【问题描述】：

我在我的项目中使用 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           |

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

This is tex           |

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

【参考方案1】：

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

（ubuntu 上有一个 firefox 插件，它将所有字体更改为非等宽字体）

【讨论】：

谢谢伙计...所以这就是问题所在。非常感谢。

#1078 不是真的相关，它是关于难看的字体，而不是错位

谢谢，这解释了我在不小心添加了 * font-family: Open Sans CSS 规则时遇到的奇怪行为，该规则当然将字体更改为非等宽，但并不是那么明显。

我的情况是 * font-family: ... 所以 .ace_editor * font-family: ... 为我做这项工作。

谢谢，但是如果我们想要 ACE 中的任何其他字体有什么解决方案吗？

【参考方案2】：

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

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

【讨论】：

你能看看***.com/questions/65603263/…吗？我已经尝试了所有技巧，包括您的建议，但没有任何效果。

【参考方案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 中

【讨论】：

你能看看***.com/questions/65603263/…吗？我已经尝试了所有技巧，包括您的建议，但没有任何效果。