Google डॉक्स समृद्ध टेक्स्ट संपादन को कैसे लागू करता है?

Question

मैंने निकोलस जाकास द्वारा वेब डेवलपर्स के लिए पेशेवर जावास्क्रिप्ट में ब्राउज़र में समृद्ध टेक्स्ट संपादन के बारे में अनुभाग पढ़ना समाप्त कर दिया। इसमें कहा गया है वहाँ रिच पाठ संपादन लागू करने के बारे में जाने के लिए दो तरीके हैं:

1. साथ आइफ्रेम designMode संपत्ति सेट on
2. करने के लिए या contenteditable विशेषता

साथ एक तत्व मैं क्या निष्कर्ष निकाला है कि जानकारी है कि है दोनों तकनीकों में इतनी क्रॉस-ब्राउज़र असंगतताएं हैं कि कोई भी वास्तव में एक विश्वसनीय समाधान नहीं है।

Google डॉक के मार्क अप का निरीक्षण करते हुए, मैं देखता हूं कि नेस्टेड div एस का एक गुच्छा है।

तो, मुझे उत्सुकता है कि Google ने समृद्ध टेक्स्ट संपादन को लागू करने के लिए सबसे उपयुक्त कौन सी तकनीक निर्धारित की है?

Answer 1

Google डॉक्स न तो designMode और न ही contentEditable का उपयोग नहीं करते हैं। जावास्क्रिप्ट में लिखा गया इसका अपना प्रतिपादन इंजन है। उनके blog post on it से:

इन समस्याओं के आसपास पाने के लिए, नया गूगल दस्तावेज़ संपादक संपादन योग्य पाठ को संभालने के लिए ब्राउज़र का उपयोग नहीं करता है। हमने पूरी तरह जावास्क्रिप्ट में एक नया नया संपादन सतह और लेआउट इंजन लिखा था।

और

अभी तक सबसे मुश्किल काम संपादक करता है यह पता लगाने की जहां पाठ आकर्षित करने के लिए है। इसके लिए, हमने एक नया लेआउट इंजन बनाया है। यहां एक उदाहरण दिया गया है कि नया इंजन कैसे काम करता है: कहें कि आप 'ए' अक्षर टाइप करते हैं। हमने देखा है कि आपने 'ए' कुंजी दबाई है और एक 'ए' ऑफ-स्क्रीन ड्राइंग करके जवाब दिया है। फिर हम उस 'ए' की चौड़ाई और ऊंचाई को मापते हैं, उन मापों को अपने कर्सर की एक्स और वाई स्थिति के साथ जोड़ते हैं, और 'ए' को स्क्रीन पर सही स्थान पर रखें। यदि आप किसी शब्द के मध्य में हैं, तो हम आपके कर्सर के बाद वर्णों को धक्का देते हैं। यदि आप किसी लाइन के अंत में हैं, तो संपादक आपके शब्द को अगली पंक्ति में ले जाता है और उसके बाद लाइनों पर किसी ओवरफ़्लो को धक्का देता है।