Ace: Posisi kursor salah

Coba lari

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

jika ini mencetak angka yang berbeda maka font yang digunakan dalam editor tidak monospace.

Perhatikan juga bahwa menambahkan aturan consolas !important adalah ide yang buruk karena akan rusak di linux dan mac.

Saya mendapat masalah serupa, dan penambahan css ini telah memperbaikinya. Mungkin membantu...

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

(Alasan: Seperti yang dikatakan @nightwing . Penambahan css ini akan memastikan Anda menggunakan monospace.)

Saya memiliki pengguna yang melihat masalah ini di Windows 10 / Chrome 41.0.2272.76.

@nightwing Ketika saya menjalankan potongan kode itu, inilah hasilnya.

Ini sepertinya hanya terjadi pada Windows. Sebelumnya saya menemukan bahwa posisi kursor _always_ salah pada Windows 8+ hingga saya menyesuaikan spasi huruf: https://github.com/ajaxorg/ace-builds/issues/58

Namun, pengguna saya masih melihat ini sesekali. Lihat tangkapan layar di sini:
https://github.com/Crunch/Crunch-2/issues/39

Apakah Ace menggunakan _all_ properti CSS dari garis yang ditampilkan saat mengukur? Seperti spasi huruf, bayangan teks, rendering teks, -webkit-text-size-adjust, dan -webkit-font-smoothing? (Yaitu, apakah itu menggunakan gaya font yang dihitung saat ini, seperti yang diterapkan pada editor yang terlihat?) Atau hanya yang tertentu?

@matthew-dean itu membutuhkan semua properti ini untuk dikustomisasi pada elemen root editor, jadi stile yang diwarisi oleh garis ace diwarisi oleh div ukuran juga.
teks- rendering:optimizeLegibility tidak didukung

@nightwing text-rendering: optimizeLegibility mungkin memang pelakunya. Itu satu-satunya hal yang dapat saya pikirkan yang akan mengimbangi monospace secara berbeda, yang tampaknya menjadi masalah, khususnya di Chrome, _khususnya Chrome untuk Windows_ sejak Windows 7. Lihat: https://github.com/zurb/foundation/issues/ 1827 (dan berbagai bug lainnya diajukan).

Saya akan mencoba menghapus pengaturan itu, setidaknya untuk editor, untuk melihat apakah itu berubah. @vdzundza Karena ini terputus-putus, saya tertarik untuk mengetahui apakah itu berhasil untuk Anda (dan jika Anda menerapkan prop/nilai itu).

Saya telah mengubah pengaturan itu ke rendering teks: geometricPrecision, yang seharusnya lebih akurat pada rendering karakter teks. Namun, pada Windows, masih menggambar posisi kursor secara tidak akurat. Lihat lebih banyak tangkapan layar @ https://github.com/Crunch/Crunch-2/issues/39

Bisakah Anda memberi saya halaman demo yang mereproduksi masalah ini, atau mungkin crunch-2 sehingga saya dapat men-debugnya?

@nightwing Anda bisa mendapatkan salinan Crunch 2 di sini: https://github.com/Crunch/Crunch-2/releases

Kemudian pesan saya di Twitter: https://twitter.com/matthewdeaners. Di NWJS, Anda bisa mendapatkan alat pengembang Chrome, tetapi ada beberapa langkah yang terlibat untuk Crunch.

@nightwing Ada ide? Kami masih mengalami masalah pada Windows 10.

Saya tidak dapat mereproduksi ini di windows 10, dapatkah Anda mengirimi saya gambar yang menunjukkan masalah ini?

@nightwing Ada beberapa gambar, beberapa dianimasikan untuk menunjukkan apa yang terjadi, di utas ini: https://github.com/Crunch/Crunch-2/issues/39

@nightwing Saya pikir sekarang ini adalah font Hasklig (https://github.com/i-tu/Hasklig) + Chromium 41 + text-rendering dengan optimizeLegibility atau geometricPrecision. Pengaturan apa pun yang memungkinkan pengikat berakhir dengan lebar karakter yang tidak konsisten. Saya mengujinya dengan garis-garis pengikat yang panjang, dan dengan mengaktifkan/menonaktifkan rendering teks, dan garis-garis itu berubah panjangnya. Jadi, dalam kasus saya, ini mungkin bukan masalah Ace, karena Hasklig tampaknya secara teknis bukan font monospace di lingkungan itu. Maaf untuk perburuan angsa liar; Saya tidak menyadari bahwa font tersebut merender non-monospace.

Errrr... Saya mungkin berbicara terlalu cepat. Saya juga mengalami masalah dengan posisi kursor dengan Source Code Pro, dan text-rendering: optimizeLegibility dimatikan. Namun, pengaturan / unsetting text-rendering tampaknya "mengatur ulang" pengukuran kursor, jadi terkadang Anda tidak dapat mereproduksi setelah pertama kali.

Oke. Jadi, saya tidak tahu persis penyebabnya, tetapi saya memiliki perbaikan yang bekerja untuk saya. Saya mengatur text-indent: 0.1px dan kemudian text-indent: 0.1px setelah batas waktu yang singkat. Ini memicu tata letak / cat / komposit seperti yang tercantum di sini: http://csstriggers.com/

@nightwing Salah satu alasan Anda belum menemukan ini mungkin karena pengaturan tema ace mungkin menyebabkan tata letak / cat / komposit dalam banyak kasus, jika salah satu pengaturan font "inheren" browser tidak cocok dengan pengaturan font dari tema, yang tampaknya mungkin. Cat pertama Chrome pada baris teks mungkin tidak akurat, artinya pengukuran Ace juga demikian, tetapi selama seseorang menetapkan bahkan satu properti CSS yang memicu tata letak ulang, tidak akan ada yang menyadarinya.

Jadi, jika Anda ingin mereproduksi, Anda dapat menguji dengan beberapa pengaturan font yang hanya disetel di CSS, dan bukan dalam tema, tetapi saya tidak yakin kombinasi ajaib apa yang mungkin dilakukan untuk mereproduksi bug. Mungkin juga Ace dapat mendeteksi bug ini dengan mengukur baris teks tertentu dengan CSS tertentu dan membandingkannya dengan konstanta yang diketahui (seperti apa hasilnya), dan kemudian jika tidak cocok, memicu pengecatan ulang di cara yang sama. (Tapi tentu saja itu berarti mereproduksi bug di tempat pertama.)

Satu hal lain yang dapat Anda lakukan adalah meminta Ace selalu menetapkan properti CSS (terlambat) terlepas dari itu akan selalu memicu tata letak/pengecatan ulang. (Saya mencoba untuk mencari tahu sesuatu yang tidak akan terlihat, tapi saya tidak yakin apa itu.) Sejauh yang saya tahu, tidak ada kinerja yang mencolok dari melakukan ini sekali, itulah yang Anda perlukan .

Saya telah mengalami masalah yang tepat dan berhasil memperbaikinya (untuk kasus saya).

Saya menjalankan fungsi pada output dari Ace untuk mengekstrak materi depan YAML. Fungsi tersebut berjalan pada acara onChange Ace. Ketika fungsi saya melakukan kesalahan, kursor mulai tidak sinkron. Bertentangan dengan masalah serupa lainnya di mana kursor tidak sinkron secara permanen, yang ini 'pulih', karena jika saya memilih-semua dan menghapus semuanya, dan mulai menulis tanpa fungsi yang menimbulkan kesalahan, kursor diposisikan dengan benar.

Tidak yakin apakah saya cukup jelas, atau apakah itu membantu dengan cara apa pun, tetapi saya menduga bahwa segala jenis gangguan pada aliran kode di sekitar Ace menyebabkan posisi kursor tidak diperbarui dengan benar (ergo posisi kursor diperbarui _setelah_ tertentu hal-hal dieksekusi, dan jika itu gagal, pemosisian kursor gagal?).

@kenlimmj melempar kesalahan dari pendengar acara akan merusak editor, karena pendengar lain tidak akan dipanggil.
editor.on("input", mungkin acara yang lebih baik untuk apa yang Anda lakukan.

Permasalahan yang sama.

Tangkapan layar:

@AviralGarg1993 Anda harus menggunakan font monospace.

@nightwing Sepertinya tidak berhasil.

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

Bagi siapa pun yang mengalami masalah ini, ini mungkin membantu:

Jika Anda memiliki set ukuran font di rem (seperti di Bootstrap 4), kursor Anda akan aneh.
Mengatur ukuran font 12px memecahkan masalah saya:

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

Pada dasarnya Ace hanya dapat menampilkan font 'monospace', Anda mungkin mengubah font entah bagaimana atau Anda menetapkan nama font di css.
jika Anda bekerja di firefox ada font default yang akan mengubah font monospace Anda. jadi sadarilah itu.

Saran @wislem tidak berhasil untuk saya tetapi menempatkan saya di jalur yang benar.

Saya menduga menggunakan ini dalam stylesheet global akan memperbaiki semua masalah terlepas dari kerangka kerja. Masalah dasar menggunakan ukuran font di rem adalah masalah inti yang sama.

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

Editor Ace tampaknya hanya berfungsi dengan font monospace. Seperti yang dinyatakan oleh @skbly7 solusi dapat menerapkan font-family:monospace tetapi menambahkan !important akan mencegah ditimpa oleh css lain yang diterapkan setelah kata-kata pada elemen.

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

Saya sedang membangun situs baru menggunakan Ace for Less.js dan ini masih menjadi masalah, tanpa ada yang lain di halaman kecuali 2 editor. Akan mencoba hack text-indent: 0.1px lama saya.

Kali ini adalah gaya default dalam proyek Vue yang menjadi penyebabnya:

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

Gaya default Ace mungkin harus mengatur ulang pengaturan itu.

Ini tampaknya menjadi masalah lama dengan editor Ace, terutama terlihat saat Anda menempelkan beberapa teks dalam bahasa non-bahasa Inggris

Asumsi saya adalah bahwa beberapa kode gila di sini yang menyebabkannya
https://github.com/ajaxorg/ace/blob/902d1a02864479cfa7c47f46972ff53fb56924fc/lib/ace/virtual_renderer.js#L1221

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

alih-alih memilih font yang aneh, bukankah Anda ingin memperbaiki penyebabnya? Ini bukan masalah di editor monaco

Anda belum memperbaiki masalah kursor. Masih sangat banyak di sana dan saya tidak berpikir masalahnya adalah css. Ini logika kursor gila

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

dan terutama
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
koordinat X mati!
ini mempengaruhi selokan juga. lebar font tidak dipertimbangkan sama sekali

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

Saya agak di ambang refactoring aplikasi saya untuk menggunakan monaco sebagai gantinya, tetapi juga bertanya-tanya apakah ini bisa diperbaiki

bahkan ketika saya mengatur font monospace dalam bahasa Rusia, masalahnya masih ada

Salah satu solusi sementara untuk font monospace neraka ini adalah memasukkan font monospace dengan editor ace yang mencakup semua bahasa, bukan hanya bahasa Rusia

Saya pikir ada masalah lain dengan menempelkan teks yang diformat ke editor ace mengacaukan posisi kursor. Ace tidak membersihkannya

@blurymind Saya pikir panjang dan pendek adalah algoritma untuk memperkirakan posisi kursor sangat naif tentang bagaimana font dirender di mesin browser. Jadi, alih-alih mengukur bagaimana karakter sebenarnya digambar, tampaknya memperkirakan apa yang "seharusnya" berdasarkan beberapa pengaturan CSS dasar dan mungkin ukuran satu karakter, dan menganggap metrik harus berlaku untuk sisa teks? Saya tidak yakin asumsi apa yang dibuat tetapi mereka tampaknya secara inheren cacat.

Anda tidak dapat benar-benar mengetahui di mana ujung blok teks yang dirender tanpa mendapatkan metrik sebenarnya. Saya tidak yakin apa algoritme yang benar, tetapi tampaknya karena ini sangat mudah dipatahkan, namun alasan mereka tentang posisi kursor dan lebar teks pada dasarnya cacat.

Dalam kasus saya itu hanya terjadi setelah mengetik "ff" atau "fi"...Bagi saya mematikan ligatur bekerja.
Jadi tambahkan saja
.ace_editor, .ace_editor div { font-variant-ligatures: none !important; }
ke cssnya.

Semoga membantu ;)

Hai,
situasi aneh di sini tetapi saya dapat mengonfirmasi bahwa font bukanlah satu-satunya masalah.
Pada proyek saya, saya memiliki komponen yang menggunakan editor Ace untuk memasukkan JSON. Itu selalu memaksa font menjadi "monospace".
Bagaimanapun, ini bekerja dengan lancar di Buku Cerita saat diisolasi.
Ketika komponen mewarisi dari CSS (saat digunakan di aplikasi, bukan di buku cerita), saya masih memiliki masalah kursor yang tidak berfungsi yang sama.
Ada banyak gaya yang diwariskan, tetapi fontnya monospace.

@Copainbig aturan css lain juga dapat mengganggu, misalnya mengatur ukuran font untuk semua elemen div

Saya menggunakan mediawiki + chrome dan mengalami kesalahan yang sama.

Masalah diselesaikan dengan menggunakan

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

di Mediawiki:Common.css

@ skbly7 Saya menghadapi masalah ini, sepertinya di versi Ace Editor sebelumnya, solusi Anda berhasil tetapi bagi saya tidak.

Inilah solusi yang Anda cari,

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

Semua yang perlu Anda ketahui

Jadi tampaknya Anda tidak dapat benar-benar menggunakan font lain saat menggunakan editor ace. Ini akan mengacaukan banyak UX untuk editor kode Anda atau apa pun yang mungkin sedang Anda kerjakan di mana Anda mungkin mencoba mengimplementasikan editor ace. Jadi jika Anda menghadapi masalah ini di masa depan, Anda dapat menggunakan kode yang disebutkan di atas untuk menyingkirkan masalah menyebalkan ini karena sulit untuk dipecahkan. Dan tidak, itu bukan kesalahan javascript, itu hanya kesalahan/bug css karena itu tidak berfungsi sebagaimana mestinya.

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

berfungsi dengan baik untuk saya, di windows10 menggunakan paket react ace