Ace: カーソル位置が間違っています

実行してみてください

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

これが異なる数字を出力する場合、エディターで使用されるフォントはモノスペースではありません。

また、ルールconsolas !importantを追加することは、LinuxとMacで機能しなくなるため、お勧めできません。

私は同様の問題を抱えていました、そしてこのcssの追加はそれを修正しました。 役立つかもしれません...

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

（理由： @nightwingが言ったように。このcssの追加により、モノスペースを使用していることが保証されます。）

Windows 10 / Chrome41.0.2272.76でこの問題が発生しているユーザーがいます。

@nightwingそのコードを実行したとき、これが出力でした。

これはWindowsでのみ発生するようです。 以前、文字間隔を調整するまで、Windows 8以降ではカーソルの位置が_常に_間違っていることがわかりました： https ：

しかし、私のユーザーはまだこれを時々見ています。 こちらのスクリーンショットをご覧ください：
https://github.com/Crunch/Crunch-2/issues/39

Aceは、測定時に表示された行の_all_ CSSプロパティを使用しますか？ 文字間隔、テキストシャドウ、テキストレンダリング、-webkit-text-size-adjust、-webkit-font-smoothingなど。 （つまり、表示されているエディターに適用される、現在のフォントの計算されたスタイルを使用しますか？）または特定のフォントのみを使用しますか？

@ matthew-deanこのすべてのプロパティをエディターのルート要素でカスタマイズする必要があるため、エースラインによって継承されるスタイルはメジャーdivによっても継承されます。
text-rending ：optimizeLegibilityはサポート

@nightwing text-rendering: optimizeLegibilityは確かに犯人かもしれません。 これは、モノスペースを異なる方法でオフセットすることを私が考えることができる唯一のことです。これは、特にChrome、特にWindows7以降のWindows用Chromeで問題になっているようです。https ： 1827年（およびその他のさまざまなバグが提出されました）。

少なくともエディターでは、その設定を削除して、変更されるかどうかを確認します。 @vdzundzaこれは断続的であるため、それが

その設定をテキストレンダリング：geometricPrecisionに変更しました。これは、テキスト文字のレンダリングでさらに正確になるはずです。 ただし、Windowsでは、カーソル位置が不正確に描画されます。 他のスクリーンショットを見る@https ：//github.com/Crunch/Crunch-2/issues/39

この問題を再現したデモページを教えていただけますか、それともデバッグできるようにcrunch-2を教えてください。

@nightwing Crunch 2のコピーはここで入手できます： https ：

次に、Twitterで私にメッセージを送信します： https ：

@nightwing何かアイデアはありますか？ Windows10ではまだ問題が発生しています。

これをWindows10で再現できませんでした。問題を示す画像を送っていただけませんか？

@nightwingこのスレッドには、何が起こっているかを示すためにアニメーション化されたいくつかの画像があります： https ：

@nightwingこれはHaskligフォント（https://github.com/i-tu/Hasklig）+ Chromium 41 + text-renderingで、optimizeLegibilityまたはgeometricPrecisionのいずれかを使用していると思います。 合字を有効にする設定は、一貫性のない文字幅でレンダリングされることになります。 長いリガチャーの行を使用して、テキストのレンダリングのオンとオフを切り替えてテストしたところ、行の長さが変更されました。 したがって、私の場合、Haskligは技術的にはその環境では等幅フォントではないように見えるため、おそらくAceの問題ではありません。 野生のガチョウを追いかけてすみません。 フォントが非モノスペースでレンダリングされていることに気づきませんでした。

エラー...私はあまりにも早く話したかもしれません。 Source Code Proでもカーソル位置に問題があり、 text-rendering: optimizeLegibilityがオフになっています。 ただし、テキストレンダリングの設定/設定解除はカーソル測定を「リセット」しているように見えるため、初回以降は再現できない場合があります。

わかった。 そのため、原因は正確にはわかりませんが、修正が機能しています。 text-indent: 0.1pxを設定してから、短いタイムアウト後にtext-indent: 0.1pxを設定しています。 これにより、次のようにレイアウト/ペイント/コンポジットがトリガーされます： http ：

@nightwingこれに遭遇したことがない理由の1つは、ブラウザの「固有の」フォント設定のいずれかが可能性が高いと思われるテーマ。 Chromeのテキスト行の最初のペイントは不正確である可能性があります。つまり、Aceの測定値も不正確ですが、誰かが再レイアウトをトリガーするCSSプロパティを1つでも設定している限り、誰も気付かないでしょう。

したがって、再現したい場合は、CSSでのみ設定され、テーマでは設定されていないフォント設定でテストできますが、バグを再現するための魔法の組み合わせが何であるかはわかりません。 また、Aceは、特定のCSSを使用して特定のテキスト行を測定し、それを既知の定数（結果がどうあるべきか）と比較することでこのバグを検出できる可能性があります。一致しない場合は、再描画をトリガーします。同じように。 （しかしもちろん、それはそもそもバグを再現することを意味します。）

もう1つできることは、常にレイアウト/再描画をトリガーするかどうかに関係なく、Aceに常に（後期の）CSSプロパティを設定させることです。 （目に見えないものを見つけようとしましたが、それが何であるかはわかりません。）私が知る限り、これを一度実行しても目立ったパフォーマンスの低下はありません。これで十分です。 。

私は正確な問題に遭遇し、なんとかそれを修正することができました（私の場合）。

Aceからの出力でYAMLフロントマターを抽出する関数を実行していました。 この関数は、AceのonChangeイベントで実行されます。 関数がエラーをスローすると、カーソルの同期が解除され始めました。 カーソルが永久に同期しなくなる別の同様の問題とは対照的に、これは「回復」します。これは、すべてを選択してすべてを削除し、関数がエラーをスローせずに書き込みを開始すると、カーソルが正しく配置されるためです。

私が十分に明確であるかどうか、またはそれが何らかの形で役立つかどうかはわかりませんが、Aceを取り巻くコードフローへの何らかの中断により、カーソル位置が正しく更新されない可能性があります（カーソル位置が特定の後に更新されます）物事が実行され、それらが失敗した場合、カーソルの配置は失敗しますか？）

@kenlimmjがイベントリスナーからエラーをスローすると、他のリスナーが呼び出されないため、エディターが破損します。
editor.on("input",は、あなたがしていることにとってより良いイベントかもしれません。

同じ問題。

スクリーンショット：

@ AviralGarg1993は、等幅フォントを使用する必要があります。

@nightwingそれはうまくいかなかったようです。

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

この問題を抱えている他の人にとって、これは役立つかもしれません：

フォントサイズをremに設定している場合（Bootstrap 4のように）、カーソルが不安定になります。
フォントサイズを12pxに設定すると、問題が解決しました。

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

基本的に、Aceは「モノスペース」フォントのみを表示できます。フォントを何らかの方法で変更するか、cssでフォント名を割り当てた可能性があります。
Firefoxで作業している場合は、デフォルトのフォントでモノスペースフォントが変更されます。 だからそれを知っておいてください。

@wislemのアドバイスは私にはうまく導いてくれました。

これをグローバルスタイルシートで使用すると、フレームワークに関係なくすべての問題が修正されると思います。 remでfont-sizeを使用する基本的な問題は、同じコアの問題でした。

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

エースエディタは、モノスペースフォントのみで動作しているようです。 @ skbly7で述べられているように、ソリューションはfont-family:monospace適用できますが、 !importantを追加すると、要素の単語の後に適用される他のcssによるオーバーライドが防止されます。

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

私はAcefor Less.jsを使用して新しいサイトを構築していますが、これはまだ問題であり、2人のエディターを除いてページには何もありません。 私の古いtext-indent: 0.1pxハックを試してみるつもりです。

今回は、これらが原因となった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エディターの古い問題のようです。特に、英語以外のテキストを貼り付けると明らかになります。

私の仮定は、ここのいくつかのクレイジーなコードがそれを引き起こしているということです
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

代わりにmonacoを使用するようにアプリをリファクタリングしようとしていますが、これを修正できるかどうかも疑問に思っています。

ロシア語で等幅フォントに設定した場合でも、問題はまだあります

このモノスペースフォント地獄の一時的な解決策の1つは、ロシア語だけでなく、すべての言語をカバーするaceエディターを備えたモノスペースフォントを含めることです。

フォーマットされたテキストをエースエディタに貼り付けると、カーソルの位置がめちゃくちゃになるという別の問題があると思います。 エースはそれを消毒していません

@blurymind長いものと短いものは、カーソル位置を推定するためのアルゴリズムであり、ブラウザエンジンでフォントがどのようにレンダリングされるかについてはひどく素朴だと思います。 したがって、文字が実際にどのように描画されるかを測定するのではなく、いくつかの基本的なCSS設定と、おそらく1つの文字のサイズに基づいて、文字が「あるべき」ものを推定し、残りのテキストについてメトリックが保持されると想定しているようです。 どのような仮定がなされているのかはわかりませんが、本質的に欠陥があるようです。

実際のメトリックを取得しないと、レンダリングされたテキストブロックの終わりがどこにあるかを実際に知ることはできません。 正しいアルゴリズムが何であるかはわかりませんが、これは非常に簡単に破れるため、カーソル位置とテキスト幅について根本的に欠陥があると考えられているようです。

私の場合、「ff」または「fi」と入力した後にのみ発生しました...私にとっては、合字をオフにすることで機能しました。
だから追加するだけ
.ace_editor, .ace_editor div { font-variant-ligatures: none !important; }
cssに。

それが役に立てば幸い ;）

こんにちは、
ここでは奇妙な状況ですが、フォントが単一の問題ではないことを確認できます。
私のプロジェクトには、Aceエディターを使用してJSONを入力するコンポーネントがあります。 フォントは常に「モノスペース」になります。
とにかく、それは孤立したときにストーリーブックでスムーズに動作します。
コンポーネントがCSSから継承する場合（ストーリーブックではなくアプリで使用する場合）、カーソルの誤動作という同じ問題が発生します。
継承されたスタイルはたくさんありますが、フォントはモノスペースです。

@Copainbig他のcssルールも干渉する可能性があります。たとえば、すべてのdiv要素のフォントサイズを設定します。

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で

@ skbly7私はこの問題に直面していました。以前のバージョンのエースエディターのように見えますが、あなたのソリューションは機能しましたが、私にとっては機能しませんでした。

これがあなたが探していた解決策です、

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

あなたが知る必要があるすべて

したがって、エースエディタを使用する場合、他のフォントを実際に使用することはできないようです。 それはあなたのコードエディタまたはあなたがおそらくエースエディタを実装しようとしているところにあなたが取り組んでいるかもしれないもののために多くのUXを台無しにするでしょう。 したがって、将来この問題に直面した場合は、上記のコードを使用して、この厄介な問題を取り除くことができます。これは、解決するのが難しいためです。 そして、それはjavascriptエラーではなく、単にcssエラー/バグであり、それが原因で想定どおりに機能していませんでした。

.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; }

私にとっては、reactaceパッケージを使用したwindows10で問題なく動作します