ब्राउज़र में WYSIWYG HTML संपादक। भाग 1

यह DesignMode और contentEditable गुण, उनके व्यवहार और सुविधाओं के बारे में लेख के अनुवाद का पहला भाग है।



लेख आधुनिक ब्राउज़रों में संपादन सुविधाओं के एकीकरण के बुनियादी सिद्धांतों और समस्याओं पर चर्चा करता है। लेख में शामिल विषय:

• विभिन्न संपादन मोड सक्षम तरीकों
• एडिटिंग कमांड्स
• HTML संपादन के दौरान उत्पन्न
• डोम बातचीत

---

प्रविष्टि

1990 में टिम बर्नस-ली द्वारा बनाए गए पहले ब्राउज़र में, वेब पेजों को सीधे WYSIWING मोड में ब्राउज़र में संपादित किया जा सकता था। वेब को एक पठनीय और लिखने योग्य माध्यम के रूप में देखा गया था। हालांकि, बाद के ब्राउज़रों ने, मुख्य रूप से केवल-पढ़ने की क्षमता प्रदान की, सिवाय इसके कि फार्म इनपुट फ़ील्ड में पाठ दर्ज करें।



ब्राउज़र में WYSIWYG संपादन फिर से इंटरनेट एक्सप्लोरर 5 की रिलीज के साथ आदर्श बन गया: एक नया डिज़ाइनमोड गुण ने उपयोगकर्ता को पूरे दस्तावेज़ को संपादित करने की अनुमति दी। सबसे पहले, इस सुविधा को किसी भी तरह से अनदेखा किया गया था, संभवतः इस तथ्य के कारण कि यह अन्य गैर-मानक के मेजबान के साथ दिखाई दिया, जो कि केवल विंडोज़ ओएस के तहत उपलब्ध है, IE की मालिकाना विशेषताएं।



हाल के वर्षों में, अन्य प्रतिस्पर्धी ब्राउज़र - मोज़िला, सफारी और ओपेरा ( अनुवादक का नोट: क्रोम लेख के लेखन के समय अभी तक सामने नहीं आया है। पहला बीटा कुछ महीनों के बाद ही जारी किया जाएगा। ) - आईई के उदाहरण का पालन किया और यह अवसर भी सीखा। WHATWG संपादन मोड को मानकीकृत करने के लिए काम कर रहा है - HTML 5 में designMode और contentEditable गुण प्रदान किए गए हैं। ऐसा प्रतीत होता है कि WYSIWYG ब्राउज़र संपादन अभी भी वेब का एक अभिन्न अंग बन रहा है।



लेख आधुनिक ब्राउज़रों में संपादन सुविधाओं के एकीकरण के बुनियादी सिद्धांतों और समस्याओं पर चर्चा करता है। लेख में शामिल विषय:

• विभिन्न संपादन मोड सक्षम तरीकों
• एडिटिंग कमांड्स
• HTML संपादन के दौरान उत्पन्न
• डोम बातचीत

लेख में दो भाग होते हैं। दूसरा भाग संपादक के उपयोग के बारे में अधिक विस्तार से जांच करेगा।



नोट: मैं केवल ब्राउज़र में संपादन सुविधाओं पर विचार करता हूं: ओपेरा 9.5, फ़ायरफ़ॉक्स 2+ और सफारी 3, क्योंकि पिछले संस्करणों में संपादक बहुत गड़बड़ और हीन थे। और IE में संपादक व्यावहारिक रूप से संस्करण 5.5 से नहीं बदला)))

मोड अवलोकन संपादित करें

संपादन मोड पृष्ठ या इसके भाग को संपादन योग्य बनाता है। यह इस तथ्य में व्यक्त किया जाता है कि:

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

संपादन मोड का उपयोग करने के लिए कई चेतावनी हैं:

• संपादक के आदेश और व्यवहार ज्यादातर विनिर्देश द्वारा वर्णित नहीं हैं, और परिणामस्वरूप HTML कोड विभिन्न ब्राउज़रों में बहुत अलग है।
• IE में कार्यान्वयन IE 5.5 (2000) की रिलीज के बाद से बहुत ज्यादा नहीं बदला है। HTML कोड जो उत्पन्न करता है वह संवेदनशील लोगों को बहुत डरा सकता है। यदि आपको लगता है कि आपने अपने जीवन में आखिरी फॉन्ट टैग बहुत पहले देखा था, तो एक आश्चर्य आपको इंतजार कर रहा है! ( अनुवादक का नोट: वू-एंड-एंड-एंड-एंड-एंड-एंड-एंड! )

संपादन मोड सक्षम करना

एडिटिंग मोड को सक्षम करने के दो तरीके हैं - डिज़ाइनमैड और कंटेंटएडिटेबल प्रॉपर्टीज़।



डॉक्यूमेंट ऑब्जेक्ट के designMode प्रॉपर्टी को सही करने के लिए एक विंडो या फ्रेम संपादन योग्य बन जाता है। (अस्वीकरण: IE में, आपको विंडो ऑब्जेक्ट से दस्तावेज़ लिंक प्राप्त करने की आवश्यकता है।) आमतौर पर, IFrame और designMode का उपयोग करके एक संपादन योग्य ब्लॉक बनाया जाता है।



किसी भी तत्व से युक्त पाठ को contentEditable property को true पर सेट करके संपादन योग्य बनाया जा सकता है। (contentEditable फ़ायरफ़ॉक्स 2 द्वारा समर्थित नहीं है, फ़ायरफ़ॉक्स 3 में समर्थन दिखाई दिया है। यह IE, ओपेरा, और सफारी के सभी वर्तमान संस्करणों में भी उपलब्ध है।)

कीबोर्ड संपादन

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



एक बहुत अच्छी सुविधा - डिफ़ॉल्ट रूप से, फिर से करें और पूर्ववत करें (कार्यों को लिखें और रद्द करें) काम करें। (इसका वर्णन बाद में किया जाएगा कि पूर्ववत आदेश को कैसे लागू किया जाए।)



Enter / Return बटन दबाए जाने पर कठिनाइयाँ शुरू होती हैं। यह स्पष्ट नहीं है कि परिणाम किस तरह का HTML कोड होना चाहिए और, वास्तव में, यह कोड विभिन्न ब्राउज़रों में बहुत भिन्न है और संदर्भ पर निर्भर करता है। यदि कर्सर एक गैर-खाली पी टैग के अंदर है, तो सभी ब्राउज़र इसे बंद कर देंगे और एक नया (समान विशेषताओं के साथ) खोलेंगे और कर्सर को इसमें स्थानांतरित करेंगे। और मोज़िला कर्सर के बाद (निरर्थक) br तत्व भी डालेगा। उदाहरण के लिए (उदाहरण में वर्टिकल बार का अर्थ है कर्सर):

1. < p > bla bla | < / p >

और IE या सफारी में एंटर / रिटर्न दबाएं:

1. < p > bla bla < / p >
2. < p > | < / p >

यदि कर्सर गैर-खाली h1 तत्व के अंत में है, तो सभी ब्राउज़र h1 को बंद कर देंगे, लेकिन IE और ओपेरा एक नया p तत्व सम्मिलित करेंगे और इसमें कर्सर रखेंगे। सफारी एक नया एच 1 तत्व डालेगी और कर्सर को अंदर रखेगी। मोज़िला कोई अतिरिक्त तत्व नहीं बनाएगा, लेकिन किसी कारण से यह कर्सर के बाद दो अतिरिक्त br टैग जोड़ देगा। उदाहरण के लिए:

1. < h1 > bla bla | < / h1 >

IE या ओपेरा में Enter / Return दबाने के बाद:

1. < h1 > bla bla < / / h1 >
2. < p > | < / p >

और मोज़िला में:

1. < h1 > bla bla < / / h1 >
2. | <br> <br>

और सफारी में:

1. < h1 > bla bla < / / h1 >
2. < h1 > | < / h1 >

यदि आप सीधे शरीर में (बिना किसी रैपर तत्वों के) पाठ लिखते हैं और Enter / Return दबाते हैं, तो मोज़िला ब्रा सम्मिलित करेगा। IE और ओपेरा पिछले पाठ को p में लपेटेंगे और एक नया p बनाएंगे। सफारी डिव डालेगी।



यदि आप div, Safari, Opera के अंदर पाठ टाइप करते हैं, और IE वर्तमान div तत्व को बंद कर देगा और एक नया खोल देगा। मोज़िला ब्र सम्मिलित करेगा और इसके बाद कर्सर रखेगा।



यदि कर्सर के चारों ओर कई आवरण तत्व हैं, तो सभी ब्राउज़र (और डुप्लिकेट) केवल आवरण को अधिकतम डिग्री के साथ बंद कर देंगे। रैपर में कर्सर रहता है।



नोट: यह डरावना है! अप्रत्याशित रूप से, IE सबसे समझदार दृष्टिकोण निकला, हमेशा ब्लॉक तत्वों के एक सार्थक उपयोग की गारंटी देता है। मोज़िला ब्लॉक तत्वों के अंदर br तत्वों का उपयोग करते हुए बहुत बुरा व्यवहार करता है, जिससे अर्थपूर्ण टेक्स्ट स्टाइल को लागू करना असंभव हो जाता है।

कर्सर की स्थिति

पात्रों के बीच कर्सर चलता है। यह दिखाई नहीं देता है कि कर्सर टैग के सापेक्ष कैसे स्थित है। ब्राउज़र की परवाह किए बिना आंदोलन का तर्क अपरिवर्तित रहता है। ब्लॉक एलिमेंट्स के बारे में: कर्सर हमेशा ब्लॉक एलीमेंट के अंदर सबसे बड़ी नेस्टिंग के साथ होता है। उदाहरण के लिए, कर्सर को दो पैराग्राफ के बीच रखना संभव नहीं है।



उदाहरण के लिए, यहां देखें; एक ऊर्ध्वाधर बार संभव कर्सर स्थितियों को इंगित करता है:

1. < p > | पी | १ | < / p > < p > | पी | 2 | < / p >
2. < div > < p > | P | 3 | < / p > < div > < p > | पी | 4 | < / p > < / div > < / div >

पाठ तत्वों के संबंध में, कर्सर सभी आवरणों के बाहर स्थित होता है यदि यह पाठ के बाईं ओर होता है; यदि यह दाहिने-सबसे हिस्से में है, तो इसे रैपर के अंदर रखा जाता है। उदाहरण के लिए:

1. < p > | ए | < strong > < em > B | < / strong > < / em > C | < / p >

इसलिए यदि आप बोल्ड टेक्स्ट के बाईं ओर वर्ण टाइप करते हैं, तो नया टेक्स्ट सामान्य शैली में प्रदर्शित होगा। यदि आप दाईं ओर टाइप करते हैं, तो यह भी बोल्ड होगा।

निष्कासन

यदि आप पैराग्राफ की सीमा को हटाते हैं, तो परिणाम अपरिवर्तित होगा: बाएं ब्लॉक "जीत" और दाएं ब्लॉक की सामग्री को बाएं में शामिल किया गया है:

1. < h1 > ओवरक्रिफ्ट < / h1 > < p > | टेक्स्ट < / p >

यदि आप Bk Sp दबाते हैं, तो आप प्राप्त करेंगे:

1. < h1 > Overskrift | टेक्स्ट < / h1 >

सफारी, हालांकि, स्मार्ट तरीके से व्यवहार करता है (या बुरी तरह से, देखने के बिंदु पर निर्भर करता है) और सही तत्व के दृष्टिकोण को अपरिवर्तित रखता है:

1. < h1 > ओवरक्रिफ्ट | < span class = "Apple-style-span" style = "font-size: 16px; font-weight: normal;" > पाठ < / span > < / h1 >

वस्तुओं का संपादन

ब्राउज़र संपादन के लिए कुछ अतिरिक्त इंटरफेस का समर्थन करते हैं।



IE आपको उनके कोनों को खींचकर छवियों, तालिकाओं, फार्म तत्वों या बिल्कुल तैनात तत्वों का आकार बदलने की अनुमति देता है (जब ऑब्जेक्ट का चयन किया जाता है, तो संबंधित कंटेनर)



मोज़िला आपको छवियों और तालिकाओं के आकार को बदलने की भी अनुमति देता है, लेकिन इसमें अतिरिक्त नियंत्रण भी हैं जो आपको एक तालिका में नए कॉलम और पंक्तियां बनाने की अनुमति देते हैं। इसके अलावा, मोज़िला आपको पूरी तरह से तैनात तत्वों को बदलने की अनुमति देता है।



इस सब के लिए प्रबंधन इंटरफेस बिल्कुल मालिकाना है, वे प्रत्येक ब्राउज़र में अलग हैं और आप उन्हें कॉन्फ़िगर नहीं कर सकते।



अनुवादक से: जब से हबर ने एक बार में 35kb पाठ प्रकाशित करने से इनकार कर दिया, मैंने अनुवाद को दो भागों में तोड़ दिया।



ब्राउज़र में WYSIWYG HTML संपादक। भाग २