डेवलपर टूल · HTML WYSIWYG एडिटर
कैसे एक WYSIWYG एडिटर फ़ॉर्मेटिंग को HTML में बदल देता है: संतोषजनक व्याख्या
· यह काम किस प्रकार करता है
HTML संतोषप्रद डेवलपर-वर्कफ़्लो
उस contenteditable विशेषता के बारे में बताता है जो किसी भी तत्व को संपादन योग्य बनाता है, ब्राउज़र आपके टाइप और फ़ॉर्मेट करते समय DOM को कैसे बदलता है, और वह DOM आपके द्वारा कॉपी किया गया HTML कैसे बन जाता है।
आपने बोल्ड दबाया; <strong> कहाँ से आया? — एक बटन क्लिक करने और मार्कअप देखने के बीच के अंतर से खुलता है
बोल्ड लेबल वाला टूलबार बटन एक पेंटब्रश की तरह लगता है, लेकिन ब्राउज़र को दस्तावेज़ ट्री में परिणाम का प्रतिनिधित्व करना चाहिए। संपादन आदेश और इंजन के आधार पर एक चयनित वाक्यांश <b> या <strong> तत्व बन सकता है। डेवलपर का कार्य उन ब्राउज़र-विशिष्ट उत्परिवर्तनों को HTML में बदलना है जिसे कोई अन्य पेज प्रत्येक टैग या खतरनाक विशेषता को स्वीकार किए बिना पढ़ सकता है। आप स्क्रीन पर जो देख रहे हैं वह एक संपादन योग्य DOM है, न कि एक स्वतंत्र फ़ॉर्मेटिंग परत वाली वर्ड-प्रोसेसिंग फ़ाइल।
contenteditable: वह विशेषता जो किसी पेज को संपादन योग्य बनाती है - संपादन होस्ट, कैरेट प्लेसमेंट और ब्राउज़र संपादन व्यवहार का स्वामी कैसे है, इसकी व्याख्या करता है
contenteditable='true' किसी तत्व को संपादन होस्ट बनाता है। ब्राउज़र नीचे एक DOM पेड़ के साथ कैरेट मूवमेंट, चयन, सम्मिलन और विलोपन का प्रबंधन करता है। ToolAcre की संपादन सतह इस ब्राउज़र सुविधा का उपयोग करती है और विज़ुअल मोड और स्रोत मोड दोनों को उजागर करती है; सामग्री रिच-टेक्स्ट सर्वर पर सबमिट होने के बजाय पेज में ही रहती है। पेस्ट इवेंट पर अलग से ध्यान दिया जाता है क्योंकि पेस्ट किए गए HTML में ऐसे तत्व और विशेषताएँ शामिल हो सकती हैं जिन्हें बिना चेक किए किसी विश्वसनीय दस्तावेज़ में दर्ज नहीं किया जाना चाहिए।
प्रत्येक कीस्ट्रोक एक DOM उत्परिवर्तन है - पाठ नोड्स के बढ़ने, तत्वों को लपेटने और विभाजित होने का वर्णन करता है, और पाठ अपरिवर्तित दिखने पर भी पेड़ क्यों बदलता है
टाइपिंग टेक्स्ट नोड्स बनाता या विस्तारित करता है; Enter दबाने से कोई ब्लॉक विभाजित हो सकता है; किसी चयन को बोल्ड करने से एक सीमा समाप्त हो जाती है। दो क्लिक के बाद सटीक DOM किसी डेवलपर की कल्पना की गई <strong> स्ट्रिंग से मेल खाने की गारंटी नहीं है: ब्राउज़र विभिन्न तत्वों और नेस्टिंग का चयन करते हैं। ToolAcre वर्तमान में फ़ॉर्मेटिंग के लिए document.execCommand का उपयोग करता है। वह API अप्रचलित है, लेकिन यहां प्रत्येक संपादन ऑपरेशन के लिए कोई समान रूप से कार्यान्वित ड्रॉप-इन प्रतिस्थापन नहीं है, इसलिए एडिटर इसके आउटपुट को कैनोनिकल मार्कअप के बजाय सामान्यीकृत करने के लिए अविश्वसनीय इनपुट के रूप में मानता है।
लाइव DOM से HTML स्ट्रिंग तक - संपादित ट्री के क्रमांकन को मार्कअप में समझाता है जिसे आप कॉपी कर सकते हैं
HTML को कॉपी करने के लिए, एडिटर संपादन सतह के आंतरिक HTML को पढ़ता है और परिणामी स्ट्रिंग को तत्व /attribute अनुमति सूची के माध्यम से पास करता है। बी जैसे टैग सिमेंटिक स्ट्रॉन्ग के लिए सामान्यीकृत हैं; स्वीकार्य URL योजनाओं के लिए अनुमत लिंक की जाँच की जाती है, जबकि इवेंट हैंडलर और असंबंधित विशेषताएँ हटा दी जाती हैं। स्रोत मोड भी अपने पाठ को दृश्य सतह पर वापस डालने से पहले उसी फ़िल्टर के माध्यम से पास करता है। यह एक एडिटर-विशिष्ट सफाई पथ है, न कि मनमाने उपयोगकर्ताओं की शत्रुतापूर्ण सामग्री के लिए सामान्य प्रयोजन सर्वर-साइड HTML सैनिटाइज़र।
कार्यान्वित उदाहरण: एक बोल्ड वाक्यांश के साथ दो-पैराग्राफ वाला नोट - टाइपिंग, चयन और बोल्डिंग के माध्यम से DOM का अनुसरण करता है, फिर परिणामी मार्कअप दिखाता है
दो पैराग्राफ टाइप करें- "प्रोजेक्ट अपडेट" और "ड्राफ्ट तैयार" - फिर दूसरे में "ड्राफ्ट" चुनें और बोल्ड दबाएं। एक ब्राउज़र लाइव DOM में <b>Draft</b> डाल सकता है। स्रोत मोड पर स्विच करने से यह ToolAcre के सैनिटाइज़र से होकर गुजरता है, जो सामान्यीकरण के बाद अपने पैराग्राफ के अंदर <strong>Draft</strong> उत्सर्जित कर सकता है। डिस्पोजेबल दस्तावेज़ में चिपकाए गए <img onerror="..."> पेलोड को आज़माएं: आउटपुट अनुमति सूची में छवियां या ईवेंट-हैंडलर विशेषताएँ शामिल नहीं हैं। उदाहरण दिखाता है कि आप यह मानने के बजाय परिणामी मार्कअप का निरीक्षण क्यों करते हैं कि एक क्लिक में एक सार्वभौमिक HTML प्रतिनिधित्व है।
क्यों समान क्रियाएं अलग-अलग ब्राउज़रों में अलग-अलग मार्कअप देती हैं - ब्राउज़र-विशिष्ट संपादन व्यवहार को कवर करती हैं और एडिटर अपने आउटपुट को सामान्य क्यों करते हैं
अलग-अलग ब्राउज़र संपादन कमांड, लाइन ब्रेक और चयन सीमाओं को अलग-अलग तरीके से लागू करते हैं। यहां तक कि समान दृश्य पैराग्राफ भी अलग-अलग नेस्टेड स्पैन या ब्लॉक तत्वों के साथ क्रमबद्ध हो सकते हैं। सामान्यीकरण कदम कुछ अंतरों को कम करता है लेकिन WYSIWYG सतह को मानक-गारंटी वाला सीरियलाइज़र नहीं बनाता है। ToolAcre दृश्य परिणाम के साथ स्रोत दिखाता है, ताकि आप विषम नेस्टिंग को ठीक कर सकें। इसका पूर्वावलोकन एक सैंडबॉक्स विशेषता के साथ एक आईफ्रेम में चलता है जो कोई स्क्रिप्ट निष्पादन नहीं देता है, जिससे उस पूर्वावलोकन तक पहुंचने वाले असुरक्षित टुकड़े का प्रभाव सीमित हो जाता है।
इसमें क्या शामिल नहीं है - सहयोगात्मक संपादन, पूर्ववत स्टैक और पूर्ण एडिटर ढाँचे दायरे से बाहर हैं
यह पेज सहयोगात्मक संपादन, पूर्ण पूर्ववत इतिहास, एक परिष्कृत ईमेल क्लाइंट या पूर्ण एडिटर ढांचे का वादा नहीं करता है। कंटेंटएडिटेबल स्वयं यह तय नहीं कर सकता है कि तृतीय-पक्ष CMS किस मार्कअप को स्वीकार करता है, और एक स्ट्रिंग-आधारित अनुमति सूची सर्वर-साइड HTML5-पार्सर सैनिटाइज़र का विकल्प नहीं है जहां अविश्वसनीय उपयोगकर्ता सामग्री सबमिट कर सकते हैं। सैंडबॉक्स्ड पूर्वावलोकन सफाई आउटपुट से एक अलग सुरक्षा है; न ही प्रत्येक गंतव्य में मनमाने ढंग से JavaScript या शत्रुतापूर्ण URL को सुरक्षित बनाता है।
टेकअवे: एडिटर एक DOM है जिसे आप देख सकते हैं - तंत्र का सारांश देता है और कैसे ToolAcre का HTML WYSIWYG एडिटर ब्राउज़र को छोड़े बिना, आपके फ़ॉर्मेटिंग द्वारा उत्पन्न मार्कअप को उजागर करता है
एडिटर एक DOM है जिसे आप देख और निरीक्षण कर सकते हैं। ToolAcre का HTML WYSIWYG एडिटर आपको आपके ब्राउज़र में स्थानीय रूप से उत्पादित फ़िल्टर किए गए HTML के साथ विज़ुअल फ़ॉर्मेटिंग क्रिया की तुलना करने का सीधा तरीका देता है। एक थ्रोअवे नोट टाइप करें और बोल्ड करें, स्रोत मोड पर स्विच करें और केवल उन तत्वों को रखें जिनका आपका गंतव्य वास्तव में समर्थन करता है।