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

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



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

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

---

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

एडिटिंग कमांड्स

ब्राउज़र कई संपादन आदेशों का समर्थन करते हैं। इन कमांड द्वारा उत्पन्न HTML मानकीकृत नहीं है और ब्राउज़र से ब्राउज़र में भिन्न है। उदाहरण के लिए, IE में, "बोल्ड" कोड उत्पन्न करेगा:

1. < strong > नमस्कार! < / strong > है

सफारी उत्पन्न करता है:

1. < स्पैन क्लास = "ऐप्पल-स्टाइल-स्पैन" स्टाइल = "फॉन्ट-वेट: बोल्ड;" > नमस्ते! < / अवधि >

कोड, कम से कम IE में, कुछ हद तक पुराने जमाने का है। कई कमांड भयानक फ़ॉन्ट टैग का उपयोग करते हैं:

1. < Font color = # ff0000> 23 < / font >

उत्पन्न मार्कअप मान्य नहीं है XHTML और, एक नियम के रूप में, मान्य HTML कोड भी।



ओपेरा फॉन्ट टैग वगैरह का उपयोग करके IE (नहीं, पूरी तरह से) के समान कोड उत्पन्न करता है।



सफारी स्पैन और इनलाइन सीएसएस का उपयोग करके स्वरूपण उत्पन्न करता है। सफ़ारी दृष्टिकोण का लाभ यह है कि यह कम से कम वैध HTML 4.01 सख्त है।



मोज़िला ऑपरेशन के 2 तरीकों का समर्थन करता है - यह या तो IE / ओपेरा जैसे प्रस्तुति टैग उत्पन्न करता है या सफारी जैसे कंटेनरों को स्टाइल करता है।



यदि आप सुनिश्चित हैं कि आपको मान्य HTML कोड की आवश्यकता है, तो आपको इस गड़बड़ के लिए मान्य (X) HTML प्राप्त करने के लिए संपादक से सर्वर-जनरेटेड कोड को साफ करना चाहिए। (ठीक है, आपको XSS हमलों से बचने के लिए इसे वैसे भी करना चाहिए)।

हॉट कीबोर्ड शॉर्टकट

हॉटकी संयोजनों के माध्यम से कई कमांड उपलब्ध हैं, उदाहरण के लिए, Ctrl / Cmd + B बोल्ड के लिए, Ctrl / Cmd + Z अंतिम क्रिया को पूर्ववत करने के लिए, आदि। लेकिन ये संयोजन ब्राउज़र के स्थान के आधार पर भिन्न हो सकते हैं।



असाइन किए गए कीबोर्ड शॉर्टकट को बदला नहीं जा सकता है, लेकिन उन्हें कीबोर्ड ईवेंट कैप्चरिंग स्क्रिप्ट का उपयोग करके फिर से लिखा जा सकता है।

संपादक एपीआई

आप उपयोगकर्ता को संपादन आदेशों का उपयोग करने की अनुमति देने के लिए एक नियंत्रण कक्ष बनाना चाह सकते हैं। यह संपादक एपीआई का उपयोग करके किया जा सकता है। यह API सामान्य DOM API की तरह नहीं है, वास्तव में यह IOleCommandTarget इंटरफ़ेस का एक स्क्रिप्ट अनुकूलन है, जो कि COM इंटरफ़ेस है जिसका उपयोग Microsoft नियंत्रण कक्ष को सिंक्रनाइज़ करने और दस्तावेज़ को संपादित करने के लिए करता है।



एपीआई दस्तावेज़ ऑब्जेक्ट में स्थित है और इसमें कमांड के बारे में जानकारी देने वाले क्वेरी उपसर्ग के साथ निष्पादन विधि और कई तरीके शामिल हैं।



सभी तरीके कमांड आईडी को पहले तर्क के रूप में स्वीकार करते हैं, यह एक स्ट्रिंग है जिसमें कमांड का नाम है। वास्तव में, तरीके:

execCommand

वर्तमान चयन के संबंध में एक आदेश निष्पादित करता है। कुछ आदेश संदर्भ के आधार पर राज्यों के बीच स्विच करते हैं। उदाहरण के लिए, यदि आप "बोल्ड" कमांड को एक चयन के लिए लागू करते हैं जिसमें पहले से ही एक बोल्ड शैली है, तो चयन सामान्य शैली में प्रदर्शित किया जाएगा। कुछ आदेशों में तर्क होते हैं, उदाहरण के लिए फोरकोलर को एक तर्क के रूप में एक रंग कोड की आवश्यकता होती है।



कुछ कमांड मोडल डायलॉग्स को इनवाइट करते हैं - उदाहरण के लिए, लिंक कमांड एक डायलॉग को इनवॉइस करता है जो आपको एक यूआरएल के लिए संकेत देता है। संवादों को बदला नहीं जा सकता है, लेकिन उन्हें प्रतिस्थापित करना संभव है। उदाहरण के लिए:

1. परिणाम = दस्तावेज। निष्पादान ( कमांड , उपयोगडायलॉग , मान )

क्या है:

आदेश: स्ट्रिंग; टीम का नाम।

useDialog: बूलियन प्रकार; अंतर्निहित संवाद दिखाना है या नहीं (सभी आदेश संवाद नहीं कह सकते हैं)।

मूल्य: कमांड द्वारा स्वीकृत मूल्य। सभी आदेश मान स्वीकार नहीं करते हैं; यदि किसी संवाद को लागू किया जाता है, तो उससे मूल्य लिया जाता है।

परिणाम: यदि उपयोगकर्ता द्वारा (डायलॉग को बंद करके) या कमांड को निष्पादित नहीं किया जा सकता है तो यह सही है कि कमांड निष्पादित हुई है या नहीं।



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

QueryCommands

वर्तमान चयन और कर्सर स्थिति के आधार पर नियंत्रण कक्ष पर बटन की स्थिति निर्धारित करने के लिए क्वेरी कमांड का उपयोग करना समझ में आता है।

QueryCommandEnabled

निर्धारित करता है कि क्या कमांड को वर्तमान चयन पर लागू किया जा सकता है। उदाहरण के लिए, "अनलिंक" केवल तभी लागू किया जा सकता है जब कर्सर लिंक के अंदर हो। यदि चयन में संपादन के लिए एक क्षेत्र शामिल नहीं है, तो कोई भी आदेश निष्पादित नहीं किया जाएगा।

QueryCommandState

इंगित करता है कि क्या चयन के लिए कमांड लागू किया गया था, अर्थात यदि चयन बोल्ड है, तो QueryCommandState बोल्ड कमांड के लिए सही लौटेगा।

QueryCommandValue

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



विभिन्न ब्राउज़रों में प्रारूप भिन्न होगा। उदाहरण के लिए, फोरकॉरर IE (जैसे # ff0000) में एक हेक्साडेसिमल मान लौटाता है, जबकि अन्य आरजीबी अभिव्यक्ति जैसे आरजीबी (255,0,0) लौटाएंगे।



ब्राउज़र के स्थानीयकरण के आधार पर कुछ मान भिन्न होते हैं, उदाहरण के लिए, IE में FormatBlock के लिए मान ब्राउज़र इंटरफ़ेस के स्थानीयकरण भाषा में पैराग्राफ के लिए नाम लौटाएगा।



ऐसे कमांड जिनके लिए कोई मूल्य नहीं हैं, जैसे कि बोल्ड, बस झूठे वापस आ जाएंगे। (API में दो अतिरिक्त विधियाँ शामिल हैं, queryCommandSupported और queryCommandIndeterminate, लेकिन वे कम से कम किसी भी तरह उनका उपयोग करने के लिए बहुत छोटी हैं।)

रेंज और चयन एपीआई

अंतर्निहित कमांड उपयोगी हैं, लेकिन यह उनके व्यवहार को बदलने या एक कस्टम कार्यान्वयन जोड़ने के लिए संभव नहीं है। सीमा और चयन एपीआई का उपयोग करके आप मनमाने ढंग से HTML परिवर्तनों का उपयोग कर सकते हैं जो आप कस्टम कमांड को लागू करने के लिए उपयोग कर सकते हैं।



समस्या यह है कि DOM को प्रभावित करने वाला कोई भी परिवर्तन पूर्ववत किए गए स्टैक को नष्ट कर देता है, जिसका उपयोग UnDo / ReDo कमांड को कार्यान्वित करने के लिए किया जाता है। यह बहुत अच्छा नहीं है, लेकिन यह गैर-मानक टीमों के लिए स्वीकार्य मूल्य हो सकता है।



रेंज / चयन एपीआई के दो मुख्य वर्ग हैं:



रेंज - दस्तावेज़ वर्णों की एक सतत श्रेणी। एक सीमा तत्वों की सीमाओं को ओवरलैप कर सकती है। रेंज में एक शुरुआत और अंत बिंदु है। यदि प्रारंभ बिंदु अंत बिंदु के साथ मेल खाता है, तो सीमा को पतित कहा जाता है।



चयन - दस्तावेज़ में वर्तमान उपयोगकर्ता चयन का प्रतिनिधित्व करता है। चयन में एक हाइलाइटेड रेंज है। यदि चयन सीमा पतित है, तो इसे एक कर्सर के रूप में प्रदर्शित किया जाता है। (संपादन मोड में तत्वों के बाहर रंग और चयन का उपयोग किया जा सकता है। आप केवल-पढ़ने के लिए दस्तावेज़ में चयन बना सकते हैं। हालाँकि, इस तरह के चयन को कम नहीं किया जा सकता है, क्योंकि कर्सर केवल तब प्रकट होता है जब तत्व संपादन मोड में होता है।)



ये सिद्धांत सभी ब्राउज़रों में समान हैं, लेकिन एपीआई स्वयं IE और अन्य सभी ब्राउज़रों में कार्यान्वयन में भिन्न हैं। IE रेंज मी चयन एपीआई के लिए अपने स्वयं के मालिकाना समाधान का उपयोग करता है, अन्य ब्राउज़र गैर-मानकीकृत चयन एपीआई के साथ संयोजन में W3C DOM रेंज एपीआई का उपयोग करते हैं।



मुख्य अंतर यह है कि IE में, श्रेणी की सामग्री HTML मार्कअप के साथ एक स्ट्रिंग के रूप में उपलब्ध है। W3C DOM रेंज एपीआई में, रेंज की सामग्री DOM नोड्स के पेड़ के रूप में उपलब्ध है।

रेंज का उदाहरण

विभिन्न तरीकों को दिखाने के लिए, निम्नलिखित एक कमांड है जो वर्तमान चयन के लिए "कोड" टैग लागू करता है।



IE में (editWindow फ्रेमवर्क में फ्रेम करने के लिए एक कड़ी है):

1. var rng = editWindow। दस्तावेज़ । चयन । createRange ( ) ;
2. RNG। pasteHTML ( "" + rng। htmlText + "" ) ;

मोज़िला में:

1. var rng = editWindow। getSelection ( ) । getRangeAt ( 0 ) ;
2. RNG। चारों ओर के दस्तावेज ( दस्तावेज़। createElement ( "कोड" ) ) ;

हाइलाइटिंग नियंत्रण

IE नियंत्रण हाइलाइटिंग का समर्थन करता है, जो नियमित रेंज हाइलाइटिंग से अलग है। जब आप किसी ऑब्जेक्ट पर क्लिक करते हैं, जैसे कि एक छवि, प्रपत्र नियंत्रण, या तालिका फ़्रेम पर नियंत्रण को हाइलाइट किया जाता है।



IE में, संयोजन ctrl + क्लिक का उपयोग करके एक ही समय में एक से अधिक तत्वों का चयन करना संभव है। अन्य ब्राउज़र नियंत्रणों को उजागर करने की अवधारणा का समर्थन नहीं करते हैं; अन्य ब्राउज़रों में, हाइलाइटिंग हमेशा एक पाठ सीमा होती है।

निष्कर्ष

यह लेख एक ब्राउज़र में डेटा को संपादित करने के बुनियादी सिद्धांतों पर चर्चा करता है। लेख के भाग दो में उपरोक्त एपीआई के आवेदन के कई उदाहरण हैं।



एक अनुवादक से: यदि यह न केवल मेरे लिए दिलचस्प है, तो मैं दूसरे लेख का अनुवाद करूंगा।



और अतिरिक्त सामग्री के लिए कुछ लिंक:

• contenteditable
• designMode
• execCommand
• HTML 5 की सड़क: contentEditable
• ExecCommand टीम संगतता
• निष्पादित करें और मोज़िला
• रेंज, TextRange और चयन
• दस्तावेज़ ऑब्जेक्ट मॉडल रेंज
• डोम रेंज संगतता