डेवलपर टूल · HTML WYSIWYG एडिटर
execCommand को क्यों हटा दिया गया है और इसके बजाय ब्राउज़र एडिटर क्या उपयोग करते हैं
· यह काम किस प्रकार करता है
HTML संतोषप्रद डेवलपर-वर्कफ़्लो
document.execCommand के उत्थान और पतन को कवर करता है, इसका आउटपुट असंगत क्यों था, और आधुनिक एडिटर इसके बजाय चयन, रेंज और बिफ़ोरइनपुट पर कैसे निर्माण करते हैं।
एक-पंक्ति वाला बोल्ड बटन जो सुरक्षित होना बंद कर देता है - execCommand('bold') और बहिष्करण चेतावनी के साथ खुलता है
एक बोल्ड बटन एक कॉल हो सकता है: संपादन सतह पर ध्यान केंद्रित करें, फिर `document.execCommand` को वर्तमान चयन पर `bold` लागू करने के लिए कहें। ToolAcre अभी भी उस पथ का उपयोग करता है क्योंकि ब्राउज़र अपने contenteditable तत्व के अंदर कैरेट और चयनित सीमा का मालिक है। कॉम्पैक्ट कॉल सुविधाजनक है, लेकिन सुविधा इसके परिणामी पेड़ को पूर्वानुमानित नहीं बनाती है।
कोड इनकार को एक सामान्य संभावना मानता है। इसका कमांड रैपर एक अपवाद को पकड़ता है, घोषणा करता है कि ब्राउज़र ने कार्रवाई को अस्वीकार कर दिया है, और लेखक को स्रोत मोड पर निर्देशित करता है। यह फ़ॉलबैक यह वादा करने से अधिक ईमानदार है कि एक टूलबार क्लिक हमेशा एक विशेष तत्व उत्पन्न करता है या प्रत्येक इंजन में समान रूप से काम करता है।
execCommand ने क्या किया और यह कहां से आया - प्रारंभिक इंटरनेट एक्सप्लोरर में इसकी उत्पत्ति और प्रत्येक ब्राउज़र द्वारा इसे अपनाए जाने की व्याख्या करता है
एक ही रैपर बोल्ड, इटैलिक, अव्यवस्थित और ऑर्डर की गई सूचियाँ, फ़ॉर्मेटिंग हटाना, पूर्ववत करना, फिर से करना, ब्लॉक फ़ॉर्मेटिंग, लिंक और अनलिंकिंग को संचालित करता है। वे कमांड वास्तव में टूलबार में मौजूद हैं; यह आलेख सूची को संरेखण, रंग, फ़ॉन्ट, तालिकाओं, छवियों या अन्य परिचित समृद्ध-पाठ सुविधाओं के साथ विस्तारित नहीं करता है जिन्हें कार्यान्वयन कभी भी उजागर नहीं करता है।
प्रत्येक कमांड लाइव संपादन योग्य DOM के विरुद्ध चलता है। इसके बाद, पैनल वर्तमान आंतरिक HTML से अपने स्रोत, पूर्वावलोकन, शब्द गणना और निष्कासन रिपोर्ट को ताज़ा करता है। इसलिए सहेजा गया परिणाम कमांड लॉग नहीं है। यह अनुरोधित ऑपरेशन को निष्पादित करने या अस्वीकार करने के बाद ब्राउज़र द्वारा छोड़ी गई किसी भी संरचना का फ़िल्टर किया गया क्रमांकन है।
कमांड API क्यों अप्रचलित है: ब्राउज़र विभिन्न DOM आकृतियाँ उत्पन्न कर सकते हैं
बहिष्करण मायने रखता है क्योंकि API एडिटर लेखक को प्रत्येक उत्परिवर्तन के लिए एक सटीक संरचनात्मक अनुबंध नहीं देता है। ToolAcre सीमाएं स्पष्ट रूप से चेतावनी देती हैं कि इंजनों के बीच व्यवहार भिन्न होता है, विशेष रूप से नेस्टेड सूचियों के आसपास। एक दृश्य सूची स्वीकार्य हो सकती है जबकि इसके नेस्टिंग या रैपर विकल्प किसी अन्य ब्राउज़र द्वारा उत्पादित मार्कअप से भिन्न होते हैं।
कोई भी रिपॉजिटरी स्रोत इस दावे का समर्थन नहीं करता है कि प्रत्येक ब्राउज़र, संस्करण या कमांड का एक विशेष अनुकूलता परिणाम होता है। सुरक्षित कथन संकीर्ण है: यह कार्यान्वयन अस्वीकृत API को कॉल करता है, इनकार को पकड़ता है, और एस्केप हैच के रूप में प्रत्यक्ष स्रोत संपादन प्रदान करता है। किसी मैट्रिक्स को एक्सट्रपलेशन करने के बजाय उस ब्राउज़र और ऑपरेशन का परीक्षण करें जिसका आप उपयोग करना चाहते हैं।
चयन और रेंज प्रासंगिक विकल्प हैं, लेकिन यह टूल उन्हें लागू नहीं करता है
चयन और रेंज चयनित DOM सीमाओं का वर्णन कर सकते हैं और स्पष्ट वृक्ष हेरफेर का समर्थन कर सकते हैं, लेकिन ToolAcre उनके साथ एक प्रतिस्थापन स्वरूपण इंजन लागू नहीं करता है। उन APआई का नामकरण इस तरह करना जैसे कि वे वर्तमान कोड पथ हों, उत्पाद का गलत वर्णन होगा। यहां, ब्राउज़र कमांड म्यूटेटर बना हुआ है और सैनिटाइज़र आउटपुट सीमा बना हुआ है।
एक कस्टम मॉडल में निशान, ब्लॉक, लेनदेन और चयन मैपिंग हो सकती है, लेकिन यह विभिन्न परीक्षणों के साथ एक अलग उत्पाद वास्तुकला है। यह हल्का एडिटर जानबूझकर ऐसी मशीनरी का दावा करने से बचता है। इसका समीक्षा योग्य अनुबंध यह है कि दृश्य क्रियाएं ब्राउज़र-निर्भर DOM बना सकती हैं, जबकि स्रोत मोड फ़िल्टर किए गए मार्कअप को प्रकट करता है जिसे वास्तव में कॉपी या डाउनलोड किया जाएगा।
beforeinput इस एडिटर के फ़ॉर्मेटिंग पथ का हिस्सा नहीं है
कार्यान्वयन कस्टम लेनदेन में संपादन इरादों का अनुवाद करने के लिए `beforeinput` को भी नहीं रोकता है। ब्राउज़र द्वारा सतह बदलने के बाद इनपुट इवेंट केवल रिफ्रेश को ट्रिगर करते हैं। पेस्ट और ड्रॉप अपवाद हैं: उन घटनाओं को रोका जाता है, उनके क्लिपबोर्ड या ट्रांसफर पेलोड को फ़िल्टर किया जाता है, और केवल परिणामी HTML या सादा पाठ डाला जाता है।
वह भेद एक व्यापक वास्तुशिल्प दावे को रोकता है। ToolAcre पेस्ट गेट का मालिक है लेकिन प्रत्येक कीस्ट्रोक म्यूटेशन का नहीं। सामान्य टाइपिंग, विलोपन, एंटर व्यवहार और टूलबार कमांड ब्राउज़र संपादन कार्य बने रहते हैं। सैनिटाइज़र उनके क्रमबद्ध आउटपुट की समीक्षा करता है; यह एडिटर को पहले इनपुट-संचालित ढांचे में नहीं बदलता है या प्रत्येक मध्यवर्ती DOM उत्परिवर्तन को सामान्य नहीं करता है।
व्यावहारिक उदाहरण: इस एडिटर द्वारा वास्तव में उत्पादित लीगेसी कमांड आउटपुट का निरीक्षण करें
ठोस जाँच के लिए, दो छोटे वाक्य टाइप करें, एक वाक्यांश चुनें और बोल्ड दबाएँ। HTML स्रोत पर स्विच करें और उस वाक्यांश के आसपास के तत्व का निरीक्षण करें। ToolAcre स्वच्छता के दौरान विरासत `b` से `strong` तक मैप करता है, इसलिए फ़िल्टर किए गए परिणाम तब भी अर्थपूर्ण हो सकते हैं, जब लाइव संपादन कमांड ने शुरू में एक विरासत टैग चुना हो।
एक सूची के साथ दोहराएँ और फिर पूर्ववत करें। टूलबार `insertUnorderedList` और `undo` भेजता है; यह एक अलग एप्लिकेशन इतिहास नहीं रखता है। यदि ब्राउज़र इनकार करता है, तो स्थिति क्षेत्र ऐसा कहता है। यदि नेस्टिंग अजीब लगती है, तो स्रोत मोड समर्थित सुधार पथ है। देखा गया आउटपुट, बटन लेबल नहीं, साक्ष्य है।
इसमें क्या शामिल नहीं है: यहां कोई प्रतिस्थापन एडिटर आर्किटेक्चर लागू नहीं किया गया है
यह आलेख आधुनिक प्रतिस्थापन कमांड सिस्टम, सहयोगी लेनदेन, नियतात्मक क्रॉस-ब्राउज़र पेड़ या कस्टम पूर्ववत स्टैक के लिए समर्थन का दावा नहीं करता है। यह कीबोर्ड शॉर्टकट के व्यवहार का भी अनुमान नहीं लगाता क्योंकि स्रोत टूलबार क्रियाओं को परिभाषित करता है, शॉर्टकट रजिस्ट्री को नहीं। असमर्थित सुविधाएँ निहित क्षमताओं के बजाय चूक बनी रहती हैं।
सुरक्षा कमांड चॉइस से अलग है। अनुमति सूची फ़िल्टर उत्सर्जित मार्कअप और पूर्वावलोकन स्क्रिप्ट के बिना सैंडबॉक्स किया गया है, लेकिन सैनिटाइज़र स्पष्ट रूप से सामान्य शत्रुतापूर्ण-इनपुट XSS फ़िल्टर के रूप में उपयोग को अस्वीकार करता है। अविश्वसनीय प्रकाशन सामग्री स्वीकार करने वाले सर्वर को अभी भी एक उपयुक्त सर्वर-साइड HTML5-पार्सर सैनिटाइज़र और गंतव्य-विशिष्ट नीति की आवश्यकता होती है।
टेकअवे: DOM का मालिक है, कमांड का नहीं - माइग्रेशन पथ का सारांश देता है और परिणामी मार्कअप वह कैसे होता है जिसका आप WYSIWYG-to-HTML टूल में निरीक्षण करते हैं
आप उस परिणाम का निरीक्षण कर सकते हैं जिसका आप निरीक्षण कर सकते हैं। इस एडिटर में, एक कमांड ब्राउज़र को एक संतुष्ट संपादन योग्य पेड़ को बदलने के लिए कहता है, फिर अनुमति सूची उस पेड़ के क्रमांकन को समर्थित उपसमूह में फिर से लिखती है। स्रोत मोड हैंडऑफ़ को उजागर करता है और ब्राउज़र संपादन व्यवहार असुविधाजनक या असंगत होने पर एक व्यावहारिक मरम्मत सतह प्रदान करता है।
अपने वास्तविक कार्य वाले ब्राउज़र में ही डिस्पोजेबल नमूने का उपयोग करें। केवल भेजे गए आदेशों का प्रयोग करें, लिंक और नेस्टिंग का निरीक्षण करें, उस पर भरोसा करने से पहले पूर्ववत करें का परीक्षण करें, और फ़िल्टर किए गए HTML को पढ़ने के बाद ही कॉपी करें। वह वर्कफ़्लो बिना यह दिखावा किए बहिष्करण का सम्मान करता है कि ToolAcre ने अंतर्निहित संपादन API को पहले ही बदल दिया है।