एचटीएमएल 5 कंटेंटेबल एट्रीब्यूट वेब कंटेंट को फ्रंट-एंड पर एडिट करता है
में नई सुविधाओं में से एक एचटीएमएल 5 मुझे आकर्षित किया कि मैं देशी फ्रंट-एंड संपादक हूं। यह सुविधा सामान्यतः सामग्री प्रबंधन प्रणालियों में ब्राउज़र से सीधे सामग्री को संपादित करने के लिए लागू की जाती है और आमतौर पर पूरी तरह से जावास्क्रिप्ट और AJAX के साथ बनाई जाती है। HTML5 प्रक्रिया को थोड़ा आसान बनाने के लिए आता है contenteditable गुण.
यह क्या करता है
किसी भी तत्व पर लागू होने पर, यह विशेषता हमें इसकी अनुमति देगी संपादित करें इसमें सामग्री, चलो नीचे उदाहरण देखते हैं:
कुकी मफिन क्रोइसैन। फवोरकी भाई बिस्किट। जुज्यूब पाउडर कुकी केक बिस्किट हलवा हलवा। बिस्किट गमियां जेली बिस्किट.
स्वीट रोल तिरामिसु चॉकलेट बार शुगर प्लम कारमेल टोस्टी रोल कारमेल। चॉकलेट केक wypas कपास कैंडी टुकड़े करना। आवेदन तिल के टुकड़े शराब पेस्ट्री पेस्ट्री क्रोइसैन कारमेल फ्रूटकेक जिंजरब्रेड बिस्किट। डोनट टॉफी कैंडी कैन.
इस उदाहरण में, हमने जोड़ा है contenteditable विशेषता और सेट करें सच तो सामग्री संपादन योग्य हो जाती है। इस विशेषता के लिए दो अन्य मूल्य जोड़े जा सकते हैं;
असत्यजो इसके विपरीत करता है: सामग्री संपादन योग्य नहीं होगीवारिस; जब यह सामग्री संपादन योग्य हो जाएगी प्रत्यक्ष माता-पिता साथ ही संपादन योग्य है.
- डेमो देखें
यदि आपने ऊपर दिए गए डेमो की जांच की है, तो आप देख सकते हैं कि सामग्री को ब्राउज़रों से ठीक से संपादित किया जा सकता है। हालांकि यह ध्यान दिया जाना चाहिए कि यह तत्व हमारे द्वारा किए गए परिवर्तनों के भंडारण को कवर नहीं करता है, इसलिए जब आप परिवर्तन करने के बाद पृष्ठ को ताज़ा करते हैं, तो सामग्री वापस आ जाएगी।.
बदलाव कैसे बचाएं
परिवर्तन सहेजना इस बात पर निर्भर करता है कि हम डेटा कहाँ संग्रहीत करेंगे; आमतौर पर, यह एक डेटाबेस में सहेजा जाएगा। लेकिन चूंकि हमारे पास डेटाबेस एक्सेस नहीं है, इसलिए इस ट्यूटोरियल में, हम आपको दिखाने जा रहे हैं कि परिवर्तनों को कैसे बचाया जाए स्थानीय भंडार. ऐसा करने के लिए, हम कोड को सरल बनाने के लिए jQuery के एक बिट का उपयोग करेंगे। मैंने आपको आगे के संदर्भ के रूप में वेब अनुप्रयोगों के लिए स्थानीय संग्रहण, अतीत, वर्तमान और भविष्य पर एक नज़र डालने की सिफारिश की है.
सबसे पहले, चलो एक जोड़ें बटन हमारी सामग्री के बगल में.
स्वीट रोल तिरामिसु चॉकलेट बार शुगर प्लम कारमेल टोस्टी रोल कारमेल। चॉकलेट केक wypas कपास कैंडी टुकड़े करना। आवेदन तिल के टुकड़े शराब पेस्ट्री पेस्ट्री क्रोइसैन कारमेल फ्रूटकेक जिंजरब्रेड बिस्किट। डोनट टॉफी कैंडी कैन.
यहां विचार यह है कि बटन क्लिक करते ही हम परिवर्तनों को संग्रहीत कर लेंगे। तो, आइए इस घटना को स्क्रिप्ट के माध्यम से सेट करें;
var theContent = $ ('# content2'); $ ('# सेव')। ('क्लिक', फंक्शन () var editContent = theCont.html.html (); localStorage.newContent = editContent;); यह कोड सामग्री में किए गए अंतिम परिवर्तन वाले स्थानीयस्टोरेज में एक नई कुंजी बनाएगा। हम यह स्पष्ट करने के लिए फायरबग या डेवलपर टूल का उपयोग कर सकते हैं कि डेटा सफलतापूर्वक संग्रहीत किया गया है या नहीं, लेकिन सुनिश्चित करें कि आपने बटन दबाया है। फ़ायरफ़ॉक्स उपयोगकर्ताओं के लिए, पर जाएँ डोम पैनल और लोकलस्टोरेज की खोज करें। क्रोम के साथ-साथ सफारी में भी हम इसे 'संसाधन' टैब के तहत देख सकते हैं.
हम इस डेटा को सामग्री को अपडेट करने के लिए पुनः प्राप्त कर सकते हैं, निम्नानुसार;
if (localStorage.getItem ('newContent')) theContent.html (localStorage.getItem ('newContent')); उपरोक्त कोड आइटम की पहचान करेगा नई सामग्री स्थानीयस्टोरेज से और यदि यह मौजूद है, तो यह इस मामले में, चयनित तत्व को मान देगा # content2. इस बिंदु पर, जब हम पृष्ठ को ताज़ा करते हैं, तब भी हमें अपने द्वारा किए गए परिवर्तन को देखना चाहिए.
- डेमो देखें
- स्रोत डाउनलोड करें
फाइनल थॉट
पुराने दिनों में, जैसा कि हमने प्रदर्शन किया था, फ्रंट-एंड एडिटर फीचर को जोड़ना, घंटों या शायद सप्ताह भी ले सकता है। आज, यह इस विशेषता के साथ केवल एक सेकंड लेता है, contenteditable.
और, caniuse.com के अनुसार, यह विशेषता पहले से ही समर्थित है, (आश्चर्यजनक रूप से IE7 + और (अस्वाभाविक रूप से) अन्य ब्राउज़रों में इस प्रकार है: फ़ायरफ़ॉक्स 12, क्रोम 20, सफारी 5.1 और ओपेरा 12. इसका मतलब है कि हम शांति के लिए इस तत्व का उपयोग कर सकते हैं पुराने ब्राउज़रों के लिए फ़ॉलबैकैक सेटअप करने के बिना दिमाग का.
