Ace: 错误的光标位置

创建于 2015-06-15 · 34评论 · 资料来源: ajaxorg/ace

我使用 ace 库来格式化 json。
我知道我们必须使用等宽字体。我使用“Consolas”，但我有另一个错误，光标从最后一个字母开始
看屏幕
bug

你知道如何解决这个问题吗？

资料来源

captainkovalsky

👍21 😕2

最有用的评论

我遇到了类似的问题，这个 css 添加已经修复了它。可能有帮助...

.ace_editor, .ace_editor div{
    font-family:monospace
}

（原因：正如@nightwing所说。添加 css 将确保您使用等宽。）

skbly7 于 2015-06-23

👍5 ❤1 🎉1

所有34条评论

尝试跑步

fm = editor.renderer.$textLayer.$fontMetrics;
"xiXbm".split("").map(fm.$measureCharWidth, fm)

如果这打印不同的数字，则编辑器中使用的字体不是等宽字体。

另请注意，添加规则consolas !important是一个坏主意，因为它会在 linux 和 mac 上中断。

nightwing 于 2015-06-15

我遇到了类似的问题，这个 css 添加已经修复了它。可能有帮助...

.ace_editor, .ace_editor div{
    font-family:monospace
}

（原因：正如@nightwing所说。添加 css 将确保您使用等宽。）

skbly7 于 2015-06-23

👍5 ❤1 🎉1

我有用户在 Windows 10 / Chrome 41.0.2272.76 上看到这个问题。

@nightwing当我运行那段代码时，这是输出。

screen shot 2015-09-14 at 12 05 26 pm

这似乎只发生在 Windows 上。以前我发现光标位置在 Windows 8+ 上_总是_错误，直到我调整了字母间距： https :

但是，我的用户仍然偶尔会看到这种情况。在此处查看屏幕截图：
https://github.com/Crunch/Crunch-2/issues/39

Ace 在测量时是否使用了显示线的 _all_ CSS 属性？比如letter-spacing、text-shadow、text-rendering、-webkit-text-size-adjust、-webkit-font-smoothing？（也就是说，它是否使用当前字体的计算样式，如应用于可见编辑器？）还是仅使用某些字体？

matthew-dean 于 2015-09-14

@matthew-dean 它要求在编辑器根元素上自定义所有这些属性，因此 ace 行继承的 stiles 也由度量 div 继承。
文本渲染：不支持

nightwing 于 2015-09-14

@nightwing text-rendering: optimizeLegibility可能确实是罪魁祸首。这是我唯一能想到的会以不同方式抵消等宽的东西，这显然是一个问题，特别是在 Chrome 中，_特别是从 Windows 7 开始的 Chrome for Windows_。请参阅： https :

我将尝试删除该设置，至少对于编辑器，看看是否会发生变化。 @vdzundza由于这是间歇性的，我很想知道这是否适合您（以及您是否应用了该道具/值）。

matthew-dean 于 2015-09-14

我已将该设置更改为文本渲染：geometricPrecision，它在文本字符渲染时应该更加准确。但是，在 Windows 上，它仍然不准确地绘制光标位置。查看更多截图@ https://github.com/Crunch/Crunch-2/issues/39

matthew-dean 于 2015-09-24

你能给我重现这个问题的演示页面，或者 crunch-2 以便我可以调试它吗？

nightwing 于 2015-09-24

@nightwing您可以在此处获取 Crunch 2 的副本： https :

然后在 Twitter 上给我发消息： https :

matthew-dean 于 2015-10-11

@nightwing 有什么想法吗？我们仍然在 Windows 10 上遇到问题。

matthew-dean 于 2015-10-19

我无法在 Windows 10 上重现此问题，您能给我发送一张显示该问题的图片吗？

nightwing 于 2015-10-19

@nightwing在此线程中有几张图片，其中一些动画显示正在发生的事情： https :

matthew-dean 于 2015-10-19

@nightwing我认为现在这是 Hasklig 字体 (https://github.com/i-tu/Hasklig) + Chromium 41 + text-rendering和 optimizeLegibility 或几何精度。任何启用连字的设置最终都会以不一致的字符宽度呈现。我用一长串连字测试了它，并通过打开/关闭文本渲染来测试它，并且线条改变了长度。因此，就我而言，这可能不是 Ace 问题，因为 Hasklig 在该环境中从技术上讲似乎不是等宽字体。对不起，追逐野鹅；我没有意识到字体呈现非等宽。

matthew-dean 于 2015-10-19

呃……我可能说得太早了。我也遇到了 Source Code Pro 的光标位置问题，并且text-rendering: optimizeLegibility已关闭。但是，设置/取消设置文本渲染似乎会“重置”光标测量，因此有时您在第一次之后无法重现。

matthew-dean 于 2015-10-19

好的。所以，我不知道确切的原因，但我有一个适合我的修复程序。我正在设置text-indent: 0.1px ，然后在短暂超时后设置text-indent: 0.1px 。这会触发布局/绘制/复合，如下所述： http :

@nightwing您没有遇到过这种情况的一个原因可能是因为在大多数情况下，如果浏览器的任何“固有”字体设置与主题，这似乎很可能。 Chrome 对文本行的第一次绘制可能不准确，这意味着 Ace 的测量结果也不准确，但只要有人设置了一个触发重新布局的 CSS 属性，就没有人会注意到。

因此，如果您想重现，您可以使用仅在 CSS 中设置的某些字体设置进行测试，而不是在主题中设置，但我不确定可以重现错误的神奇组合是什么。也有可能 Ace 可以通过测量具有特定 CSS 的特定文本行并将其与已知常量（结果应该是什么）进行比较来检测此错误，然后如果不匹配，则在同样的方式。（当然，这首先意味着要重现错误。）

您可以做的另一件事是让 Ace 始终设置（后期）CSS 属性，而不管它总是会触发布局/重绘。（我试图找出一些看不见的东西，但我不确定那可能是什么。）据我所知，执行一次没有明显的性能影响，这就是你所需要的.

matthew-dean 于 2015-10-19

我遇到了确切的问题并设法解决了它（就我而言）。

我在 Ace 的输出上运行一个函数来提取 YAML 前端内容。所述函数在 Ace 的 onChange 事件上运行。当我的函数抛出错误时，光标开始不同步。与光标永久不同步的另一个类似问题相反，这个问题会“恢复”，因为如果我全选并删除所有内容，然后开始写入而函数不会抛出任何错误，则光标定位正确。

不确定我是否足够清楚，或者它是否有任何帮助，但我怀疑围绕 Ace 的代码流的任何类型的中断都会导致光标位置无法正确更新（因此光标位置更新_after_确定事情被执行，如果这些失败，游标定位失败？）。

kenlimmj 于 2016-01-03

@kenlimmj从事件侦听器抛出错误将破坏编辑器，因为不会调用其他侦听器。
editor.on("input",可能是您正在做的更好的活动。

nightwing 于 2016-01-03

同样的问题。

截屏：

gaviral 于 2018-02-09

@AviralGarg1993您需要使用等宽字体。

nightwing 于 2018-02-09

@nightwing那似乎不起作用。

https://github.com/AviralGarg1993/codeSirens/commit/edf539da1d752e5b7404a4fd7ae129f0f74a1d35

gaviral 于 2018-02-09

对于遇到此问题的其他人，这可能会有所帮助：

如果你在 rem 中设置了字体大小（就像在 Bootstrap 4 中一样），你的光标会很古怪。
将字体大小设置为 12px 解决了我的问题：

.ace_editor .ace_content {
  font-size: 12px !important;
}

wislem 于 2018-03-20

👍2

基本上 Ace 只能显示“等宽”字体，您可能会以某种方式更改字体，或者您在 css 中指定了字体名称。
如果您在 Firefox 中工作，则默认字体会更改您的等宽字体。所以要注意这一点。

Laithmiehiar 于 2018-04-12

@wislem的建议对我不起作用，但让我走上了正轨。

我怀疑在全局样式表中使用它可以解决所有问题，而不管框架如何。不过，在 rem 中使用 font-size 的基本问题是相同的核心问题。

.ace_editor div, .ace_editor span { font-size: 12px !important; }

mjaverto 于 2018-05-16

👍1

Ace 编辑器似乎只能使用等宽字体。正如@skbly7所述，解决方案可以应用font-family:monospace但添加!important将防止被其他在元素上的单词后应用的 css 覆盖。

.ace_editor, .ace_text-input, .ace_editor div{
    font-family : monospace !important;
}

pranavq212 于 2018-06-13

👍1

我正在使用 Ace for Less.js 构建一个新站点，这仍然是一个问题，页面上除了 2 个编辑器之外没有其他内容。打算尝试我的旧text-indent: 0.1px hack。

matthew-dean 于 2018-07-22

这一次，这些是 Vue 项目中的默认样式是罪魁祸首：

html {
  word-spacing: 1px;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

Ace 默认样式可能应该重置这些设置。

matthew-dean 于 2018-07-22

👍3

这个好像是Ace编辑器的老问题了，尤其是非英文粘贴一些文字的时候特别明显

我的假设是这里有一些疯狂的代码导致了它
https://github.com/ajaxorg/ace/blob/902d1a02864479cfa7c47f46972ff53fb56924fc/lib/ace/virtual_renderer.js#L1221

尝试
Встре́ча с медве́дем мо́жет быть о́чень опа́сна. Ру́сские лю́ди лю́бят ходи́ть в лес и собира́ть грибы́ и я́годы. Они́ де́лают э́то с осторо́жностью, так как медве́ди то́же о́чень лю́бят я́годы и мо́гут напа́сть на челове́ка. Медве́дь ест всё: я́годы, ры́бу, мя́со и да́же насеко́мых. Осо́бенно он лю́бит мёд.

而不是选择奇怪的字体，你不想解决问题吗？这在摩纳哥编辑器中不是问题

您还没有修复光标问题。它仍然在那里，我不认为问题出在 css 上。这是疯狂的游标逻辑

https://github.com/ajaxorg/ace/blob/902d1a02864479cfa7c47f46972ff53fb56924fc/lib/ace/virtual_renderer.js#L1309

尤其是
https://github.com/ajaxorg/ace/blob/902d1a02864479cfa7c47f46972ff53fb56924fc/lib/ace/virtual_renderer.js#L1482
https://github.com/ajaxorg/ace/blob/902d1a02864479cfa7c47f46972ff53fb56924fc/lib/ace/virtual_renderer.js#L1509
X 坐标关闭！
这也会影响排水沟。根本不考虑字体宽度

或许
https://github.com/ajaxorg/ace/blob/7285dad33867771a688a96bbf2309f4e995a5b7d/lib/ace/layer/cursor.js#L174

我即将重构我的应用程序以改用摩纳哥，但也想知道这是否可以解决

即使我在俄语中设置为等宽字体，问题仍然存在

blurymind 于 2019-09-13

这种等宽字体地狱的一个临时解决方案是在 ace 编辑器中包含一个等宽字体，该字体涵盖所有语言，而不仅仅是俄语

我认为将格式化文本粘贴到 ace 编辑器中会弄乱光标位置还有另一个问题。 Ace 没有对其进行消毒

blurymind 于 2019-09-13

@blurymind我认为长短是估计光标位置的算法对于字体在浏览器引擎中的呈现方式非常幼稚。因此，与其测量字符的实际绘制方式，不如根据一些基本的 CSS 设置和单个字符的大小来估计它们“应该是什么”，并假设这些指标应该适用于文本的其余部分？我不确定正在做出什么假设，但它们似乎有内在缺陷。

如果没有获得其实际指标，您就无法真正知道渲染文本块的结束位置。我不确定正确的算法是什么，但似乎因为这很容易破坏，但是他们对光标位置和文本宽度的推理从根本上是有缺陷的。

matthew-dean 于 2019-09-17

👍1

在我的情况下，它只发生在输入“ff”或“fi”之后......对我来说关闭连字工作。
所以只需添加
.ace_editor, .ace_editor div { font-variant-ligatures: none !important; }
到CSS。

希望能帮助到你 ;）

xRy-42 于 2019-10-07

你好，
这里的情况很奇怪，但我可以确认字体不是唯一的问题。
在我的项目中，我有一个使用 Ace 编辑器输入 JSON 的组件。它总是强制字体为“等宽”。
无论如何，它在孤立时可以在 Storybook 上顺利运行。
当组件从 CSS 继承时（在应用程序中使用时，而不是在故事书中），我仍然会遇到光标故障的相同问题。
有很多继承的样式，但字体是等宽的。

Copainbig 于 2019-10-29

@Copainbig其他 css 规则也可能会干扰，例如为所有 div 元素设置字体大小

nightwing 于 2019-10-30

👍1

我正在使用 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

WinHGGG 于 2020-09-26

🎉3 ❤1

@skbly7我

这是您正在寻找的解决方案，

.ace_editor * {
    font-family: monospace !important;
}

所有你必须知道的

很明显，在使用 ace 编辑器时，您不能真正使用其他字体。它会为您的代码编辑器或任何您可能正在尝试实施 ace 编辑器的地方打乱很多 UX。因此，如果您将来遇到这个问题，您可以使用上述代码来摆脱这个糟糕的问题，因为它很难解决。不，这不是 javascript 错误，它只是 css 错误/错误，因此它没有按预期方式工作。

Jaagrav 于 2020-11-09

🎉1

对我来说很好用，在 windows10 上使用 react ace 包

CeoFred 于 2020-11-24

👍2

此页面是否有帮助？

0 / 5 - 0 等级

Ace: 错误的光标位置

最有用的评论

所有34条评论

相关问题