Ace: गलत कर्सर स्थिति

दौड़ने का प्रयास करें

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

यदि यह अलग-अलग नंबरों को प्रिंट करता है तो संपादक में प्रयुक्त फ़ॉन्ट मोनोस्पेस नहीं है।

यह भी ध्यान दें कि एक नियम जोड़ना consolas !important एक बुरा विचार है क्योंकि यह linux और mac पर टूट जाएगा।

मुझे इसी तरह का मुद्दा मिला था, और इस सीएसएस जोड़ ने इसे ठीक कर दिया है। मदद हो सकती है...

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

(कारण: जैसा कि @nightwing ने बताया है। css का यह जोड़ यह सुनिश्चित करेगा कि आप मोनोस्पेस का उपयोग कर रहे हैं।)

मेरे पास विंडोज 10/क्रोम 41.0.2272.76 पर इस समस्या को देखने वाले उपयोगकर्ता हैं।

@nightwing जब मैंने कोड का वह टुकड़ा चलाया तो यह आउटपुट था।

यह केवल विंडोज़ पर होता प्रतीत होता है। पहले मैंने पाया कि विंडोज 8+ पर कर्सर की स्थिति _always_ गलत थी जब तक कि मैंने लेटर-स्पेसिंग को समायोजित नहीं किया: https://github.com/ajaxorg/ace-builds/issues/58

हालाँकि, मेरे उपयोगकर्ता अभी भी इसे कभी-कभी देख रहे हैं। यहां स्क्रीनशॉट देखें:
https://github.com/Crunch/Crunch-2/issues/39

क्या ऐस मापते समय प्रदर्शित लाइन के _all_ CSS गुणों का उपयोग करता है? जैसे लेटर-स्पेसिंग, टेक्स्ट-शैडो, टेक्स्ट-रेंडरिंग, -वेबकिट-टेक्स्ट-साइज़-एडजस्ट, और -वेबकिट-फ़ॉन्ट-स्मूथिंग? (अर्थात, क्या यह वर्तमान फ़ॉन्ट की गणना शैली का उपयोग करता है, जैसा कि दृश्य संपादक पर लागू होता है?) या केवल कुछ ही?

@ मैथ्यू-डीन को इन सभी गुणों को संपादक मूल तत्व पर अनुकूलित करने की आवश्यकता है, इसलिए ऐस लाइनों द्वारा विरासत में मिली स्टाइल्स को माप डिव द्वारा भी विरासत में मिला है।
टेक्स्ट- रेंडरिंग: ऑप्टिमाइज़ पठनीयता समर्थित नहीं है

@nightwing text-rendering: optimizeLegibility वास्तव में अपराधी हो सकता है। यह केवल एक चीज है जिसके बारे में मैं सोच सकता था कि एक मोनोस्पेस को अलग तरह से ऑफसेट किया जाएगा, जो स्पष्ट रूप से एक समस्या रही है, विशेष रूप से क्रोम में, _विशेष रूप से विंडोज के लिए क्रोम_ विंडोज 7 के बाद से। देखें: https://github.com/zurb/foundation/issues/ 1827 (और अन्य विभिन्न बग दायर)।

मैं उस सेटिंग को हटाने की कोशिश करूंगा, कम से कम संपादक के लिए, यह देखने के लिए कि क्या वह बदलता है। @vdzundza चूंकि यह रुक-रुक कर है, मुझे यह जानने में दिलचस्पी होगी कि क्या यह आपके लिए काम करता है (और यदि आपके पास वह प्रोप/मूल्य लागू था)।

मैंने उस सेटिंग को टेक्स्ट-रेंडरिंग में बदल दिया है: ज्यामितीय प्रेसिजन, जो टेक्स्ट कैरेक्टर प्रतिपादन में और भी सटीक होना चाहिए। हालांकि, विंडोज़ पर, यह अभी भी कर्सर की स्थिति को गलत तरीके से चित्रित कर रहा है। अधिक स्क्रीनशॉट देखें @ https://github.com/Crunch/Crunch-2/issues/39

क्या आप मुझे इस मुद्दे को पुन: प्रस्तुत करने वाला डेमो पेज दे सकते हैं, या शायद क्रंच-2 ताकि मैं इसे डीबग कर सकूं?

@nightwing आप यहां क्रंच 2 की एक प्रति प्राप्त कर सकते हैं: https://github.com/Crunch/Crunch-2/releases

फिर मुझे ट्विटर पर मैसेज करें :

@nightwing कोई विचार? हमें अभी भी विंडोज 10 पर समस्या हो रही है।

मैं इसे विंडोज़ 10 पर पुन: पेश नहीं कर सका, क्या आप मुझे इस मुद्दे को दिखाते हुए एक छवि भेज सकते हैं?

@nightwing इस धागे में कई छवियां हैं, कुछ एनिमेटेड दिखाने के लिए कि क्या हो रहा है: https://github.com/Crunch/Crunch-2/issues/39

@nightwing अब मुझे लगता है कि यह हास्कलिग फ़ॉन्ट है (https://github.com/i-tu/Hasklig) + क्रोमियम 41 + text-rendering या तो अनुकूलन योग्यता या ज्यामितीय प्रेसिजन के साथ। कोई भी सेटिंग जो संयुक्ताक्षर को सक्षम करती है, असंगत वर्ण चौड़ाई के साथ प्रतिपादन समाप्त करती है। मैंने इसे लिगचर की लंबी लाइनों के साथ परीक्षण किया, और टेक्स्ट-रेंडरिंग को चालू / बंद करके, और लाइनों की लंबाई बदल गई। तो, मेरे मामले में, यह शायद ऐस मुद्दा नहीं है, क्योंकि हास्कलिग तकनीकी रूप से उस वातावरण में एक मोनोस्पेस फ़ॉन्ट नहीं दिखता है। जंगली हंस पीछा करने के लिए खेद है; मुझे नहीं पता था कि फ़ॉन्ट गैर-मोनोस्पेस प्रदान कर रहा था।

एरर... मैंने बहुत जल्दी बात कर ली होगी। मुझे स्रोत कोड प्रो के साथ भी कर्सर की स्थिति में समस्या आ रही है, और text-rendering: optimizeLegibility बंद है। हालांकि, टेक्स्ट-रेंडरिंग को सेट/अनसेट करना कर्सर मापने को "रीसेट" करने लगता है, इसलिए कभी-कभी आप पहली बार के बाद पुन: उत्पन्न नहीं कर सकते हैं।

ठीक। इसलिए, मुझे इसका ठीक-ठीक कारण नहीं पता, लेकिन मेरे पास एक समाधान है जो मेरे लिए काम कर रहा है। मैं थोड़े समय के बाद text-indent: 0.1px और फिर text-indent: 0.1px सेट कर रहा हूं। यह लेआउट/पेंट/समग्र को ट्रिगर करता है जैसा कि यहां बताया गया है: http://csstriggers.com/

@nightwing एक कारण

इसलिए, यदि आप पुनरुत्पादन करना चाहते हैं, तो आप केवल सीएसएस में सेट कुछ फ़ॉन्ट सेटिंग्स के साथ परीक्षण कर सकते हैं, न कि थीम में, लेकिन मुझे यकीन नहीं है कि बग को पुन: उत्पन्न करने के लिए जादू संयोजन क्या हो सकता है। यह भी संभव है कि ऐस विशेष सीएसएस के साथ पाठ की एक विशेष पंक्ति को मापकर और एक ज्ञात स्थिरांक (परिणाम क्या होना चाहिए) के साथ तुलना करके इस बग का पता लगाने में सक्षम हो सकता है, और फिर यदि यह मेल नहीं खाता है, तो एक रिपेंट को ट्रिगर करना वही तरीका। (लेकिन निश्चित रूप से इसका मतलब बग को पहले स्थान पर पुन: उत्पन्न करना होगा।)

एक और चीज जो आप कर सकते हैं वह यह है कि ऐस हमेशा एक (देर से) सीएसएस संपत्ति सेट करता है, भले ही वह हमेशा लेआउट/पुन: रंगना ट्रिगर करे। (मैंने कुछ ऐसा पता लगाने की कोशिश की जो दिखाई नहीं देगा, लेकिन मुझे यकीन नहीं है कि वह क्या हो सकता है।) जहां तक ​​​​मैं कह सकता हूं, ऐसा करने से कोई ध्यान देने योग्य प्रदर्शन हिट नहीं होता है, जो आपको चाहिए चाहिए .

मुझे सटीक समस्या का सामना करना पड़ा है और इसे ठीक करने में कामयाब रहा (मेरे मामले के लिए)।

मैं वाईएएमएल फ्रंट मैटर निकालने के लिए ऐस से आउटपुट पर एक फ़ंक्शन चला रहा था। कहा गया समारोह ऐस के ऑनचेंज इवेंट पर चलता है। जब मेरे फ़ंक्शन ने त्रुटियां फेंकीं, तो कर्सर डीसिंक्रनाइज़ करना शुरू कर दिया। इसी तरह की एक अन्य समस्या के विपरीत, जिसमें कर्सर स्थायी रूप से सिंक से बाहर हो जाते हैं, यह एक 'पुनर्प्राप्त' होता है, क्योंकि अगर मैं सभी का चयन करता हूं और सब कुछ हटा देता हूं, और बिना किसी त्रुटि के फ़ंक्शन को लिखना शुरू करता हूं, तो कर्सर सही ढंग से स्थित होता है।

सुनिश्चित नहीं है कि मैं पर्याप्त रूप से स्पष्ट हूं, या यदि यह किसी भी तरह से मदद करता है, लेकिन मुझे संदेह है कि ऐस के आसपास के कोड प्रवाह में किसी भी प्रकार की बाधा कर्सर की स्थिति को सही ढंग से अपडेट नहीं करने का कारण बनती है (कर्सर की स्थिति अपडेट की जाती है _after_ निश्चित चीजें निष्पादित की जाती हैं, और यदि वे विफल हो जाती हैं, तो कर्सर की स्थिति विफल हो जाती है?)

घटना श्रोताओं से @kenlimmj फेंकने की त्रुटि संपादक को तोड़ देगी, क्योंकि अन्य श्रोताओं को नहीं बुलाया जाएगा।
आप जो कर रहे हैं उसके लिए editor.on("input", एक बेहतर घटना हो सकती है।

समान समस्या।

स्क्रीनशॉट:

@ AviralGarg1993 आपको मोनोस्पेस फ़ॉन्ट का उपयोग करने की आवश्यकता है।

@nightwing काम नहीं लग रहा था।

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

किसी और को यह समस्या होने के लिए, यह मदद कर सकता है:

यदि आपके पास रेम में एक फ़ॉन्ट-आकार सेट है (जैसे बूटस्ट्रैप 4 में), तो आपका कर्सर निराला होगा।
12px का फ़ॉन्ट आकार सेट करने से मेरी समस्या हल हो गई:

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

मूल रूप से ऐस केवल 'मोनोस्पेस' फोंट प्रदर्शित कर सकता है, आप किसी भी तरह फ़ॉन्ट बदल सकते हैं या आप सीएसएस में फ़ॉन्ट नाम असाइन कर सकते हैं।
यदि आप फ़ायरफ़ॉक्स में काम कर रहे हैं तो एक डिफ़ॉल्ट फ़ॉन्ट आपके मोनोस्पेस फ़ॉन्ट को बदल देगा। तो इसके प्रति जागरूक रहें।

@wislem की सलाह मेरे काम नहीं आई लेकिन मुझे सही रास्ते पर

मुझे संदेह है कि वैश्विक स्टाइलशीट में इसका उपयोग करने से ढांचे के बावजूद सभी समस्याएं ठीक हो जाएंगी। हालांकि, रेम में फॉन्ट-साइज का उपयोग करने की मूल समस्या वही मूल समस्या थी।

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

ऐसा लगता है कि ऐस संपादक केवल मोनोस्पेस फ़ॉन्ट के साथ काम कर रहा है। जैसा कि @ skbly7 द्वारा कहा गया है समाधान font-family:monospace लागू किया जा सकता है लेकिन !important जोड़ने से तत्वों पर शब्दों के बाद लागू अन्य सीएसएस द्वारा ओवरराइड को रोका जा सकेगा।

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

मैं Ace for 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;
}

ऐस डिफ़ॉल्ट शैलियों को शायद उन सेटिंग्स को रीसेट करना चाहिए।

ऐस संपादक के साथ यह एक पुरानी समस्या प्रतीत होती है, विशेष रूप से तब स्पष्ट होती है जब आप कुछ पाठ गैर-अंग्रेज़ी में चिपकाते हैं

मेरी धारणा यह है कि यहाँ कुछ पागल कोड इसका कारण बन रहा है
https://github.com/ajaxorg/ace/blob/902d1a02864479cfa7c47f46972ff53fb56924fc/lib/ace/virtual_renderer.js#L1221

के साथ प्रयास करें
Встре́ча с медве́дем мо́жет быть о́чень опа́сна. Ру́сские лю́ди лю́бят ходи́ть в лес и собира́ть грибы́ и я́годы. Они́ де́лают э́то с осторо́жностью, так как медве́ди то́же о́чень лю́бят я́годы и мо́гут напа́сть на челове́ка. Медве́дь ест всё: я́годы, ры́бу, мя́со и да́же насеко́мых. Осо́бенно он лю́бит мёд.

अजीब फोंट चुनने के बजाय, क्या आप इसके बजाय कारण को ठीक नहीं करना चाहते हैं? यह मोनाको संपादक में कोई समस्या नहीं है

आपने अभी तक कर्सर की समस्या को ठीक नहीं किया है। यह अभी भी बहुत कुछ है और मुझे नहीं लगता कि समस्या सीएसएस है। यह क्रेजी कर्सर लॉजिक है

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
एक्स निर्देशांक बंद है!
इससे नाले भी प्रभावित होते हैं। फ़ॉन्ट की चौड़ाई पर बिल्कुल भी ध्यान नहीं दिया जाता है

या हो सकता है
https://github.com/ajaxorg/ace/blob/7285dad33867771a688a96bbf2309f4e995a5b7d/lib/ace/layer/cursor.js#L174

मैं इसके बजाय मोनाको का उपयोग करने के लिए अपने ऐप को फिर से सक्रिय करने के कगार पर हूं, लेकिन यह भी सोच रहा हूं कि क्या इसे ठीक किया जा सकता है

यहां तक ​​​​कि जब मैं रूसी में मोनोस्पेस्ड फ़ॉन्ट पर सेट करता हूं, तब भी समस्या बनी रहती है

इस मोनोस्पेस फ़ॉन्ट नरक के लिए एक अस्थायी समाधान इक्का संपादक के साथ एक मोनोस्पेस फ़ॉन्ट शामिल करना है जो सभी भाषाओं को शामिल करता है, न कि केवल रूसी

मुझे लगता है कि स्वरूपित पाठ को इक्का संपादक में चिपकाने से कर्सर की स्थिति खराब होने में एक और समस्या है। ऐस इसे सैनिटाइज नहीं कर रहा है

@blurymind मुझे लगता है कि कर्सर की स्थिति का आकलन करने के लिए एल्गोरिदम लंबा और छोटा है, ब्राउज़र इंजन में फोंट कैसे प्रस्तुत किए जाते हैं, इस बारे में बहुत ही

आप वास्तव में नहीं जान सकते हैं कि किसी रेंडर किए गए टेक्स्ट ब्लॉक का अंत उसकी वास्तविक मेट्रिक्स प्राप्त किए बिना कहां है। मुझे यकीन नहीं है कि सही एल्गोरिदम क्या है, लेकिन ऐसा लगता है क्योंकि इसे तोड़ना इतना आसान है, हालांकि वे कर्सर की स्थिति के बारे में तर्क दे रहे हैं और टेक्स्ट चौड़ाई मौलिक रूप से त्रुटिपूर्ण है।

मेरे मामले में यह केवल "ff" या "fi" टाइप करने के बाद हुआ ... मेरे लिए संयुक्ताक्षर को बंद करना काम कर गया।
तो बस जोड़ें
.ace_editor, .ace_editor div { font-variant-ligatures: none !important; }
सीएसएस को।

आशा है ये मदद करेगा ;)

नमस्ते,
यहां अजीब स्थिति है लेकिन मैं पुष्टि कर सकता हूं कि फ़ॉन्ट एकमात्र मुद्दा नहीं है।
मेरी परियोजना पर मैं JSON इनपुट करने के लिए ऐस संपादक का उपयोग कर एक घटक है। यह हमेशा फ़ॉन्ट को "मोनोस्पेस" होने के लिए मजबूर करता है।
वैसे भी, अलग-थलग पड़ने पर यह Storybook पर आसानी से काम करता है।
जब घटक सीएसएस से प्राप्त होता है (जब ऐप में उपयोग किया जाता है, स्टोरीबुक में नहीं), तो मेरे पास खराब कर्सर का एक ही मुद्दा है।
बहुत सी विरासत में मिली शैलियाँ हैं, लेकिन फ़ॉन्ट मोनोस्पेस है।

@Copainbig अन्य सीएसएस नियम भी हस्तक्षेप कर सकते हैं, उदाहरण के लिए सभी div तत्वों के लिए फ़ॉन्ट-आकार सेट करना

मैं मीडियाविकी + क्रोम का उपयोग कर रहा हूं और उसी त्रुटि का सामना कर रहा हूं।

उपयोग करके हल की गई समस्या

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

तुम्हें सिर्फ ज्ञान की आवश्यकता है

तो जाहिर तौर पर आप किसी इक्का संपादक का उपयोग करते समय वास्तव में किसी अन्य फ़ॉन्ट का उपयोग नहीं कर सकते हैं। यह आपके कोड संपादक के लिए या जो कुछ भी आप काम कर रहे हैं, जहां आप शायद इक्का संपादक को लागू करने की कोशिश कर रहे हैं, के लिए बहुत सारे यूएक्स को गड़बड़ाने जा रहा है। तो यदि आप भविष्य में इस समस्या का सामना करते हैं, तो आप इस छोटी सी समस्या से छुटकारा पाने के लिए उपरोक्त कोड का उपयोग कर सकते हैं क्योंकि यह हल करने के लिए एक कुतिया है। और नहीं, यह जावास्क्रिप्ट त्रुटि नहीं थी, यह सिर्फ एक सीएसएस त्रुटि/बग थी जिसके कारण यह उस तरह से काम नहीं कर रहा था जिस तरह से इसे माना जाता था।

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

मेरे लिए ठीक काम करता है, विंडोज़ 10 पर प्रतिक्रिया ऐस पैकेज का उपयोग कर रहा है