साइट आगंतुकों द्वारा वेब पेज सामग्री संपादन योग्य बनाना

उपयोगकर्ताओं द्वारा संपादन योग्य वेबसाइट पर टेक्स्ट बनाना आपके अपेक्षा से आसान है। एचटीएमएल इस उद्देश्य के लिए एक विशेषता प्रदान करता है: contenteditable.

contenteditable विशेषता पहली बार 2014 में एचटीएमएल 5 के रिलीज के साथ पेश की गई थी। यह निर्दिष्ट करता है कि यह जिस सामग्री को नियंत्रित करता है उसे ब्राउज़र के भीतर से साइट विज़िटर द्वारा बदला जा सकता है या नहीं।

संगत विशेषता के लिए समर्थन

अधिकांश आधुनिक डेस्कटॉप ब्राउज़र विशेषता का समर्थन करते हैं। इसमें शामिल है:

• क्रोम 4.0 और ऊपर
• इंटरनेट एक्सप्लोरर 6 और ऊपर
• फ़ायरफ़ॉक्स 3.5 और ऊपर
• सफारी 3.1 और ऊपर
• ओपेरा 10.1 और ऊपर
• माइक्रोसॉफ्ट बढ़त

वही अधिकांश मोबाइल ब्राउज़र के लिए भी जाता है।

सहमतिजनक का उपयोग कैसे करें

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

सहमति के साथ एक संपादन योग्य टू-डू सूची बनाएँ

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

1. अपने पृष्ठ को एक HTML संपादक में खोलें।
2. नामित बुलेट, अनियंत्रित सूची बनाएं मेरे कार्य:
   2. कुछ कार्य
   4. एक और काम
5. जोड़ेंcontenteditable के लिए विशेषता
   तत्व:
   अब आपके पास एक टू-डू सूची है जो संपादन योग्य है-लेकिन यदि आप अपना ब्राउज़र बंद करते हैं या पृष्ठ छोड़ देते हैं, तो आपकी सूची गायब हो जाएगी। समाधान: कार्यों को स्थानीय स्टोरेज में सहेजने के लिए एक सरल स्क्रिप्ट जोड़ें।
8. में jQuery के लिए एक लिंक जोड़ें आपके दस्तावेज़ का यह उदाहरण Google सीडीएन का उपयोग करता है, लेकिन यदि आप चाहें तो आप इसे स्वयं होस्ट कर सकते हैं या किसी अन्य सीडीएन का उपयोग कर सकते हैं।
11. अपने पृष्ठ के नीचे, बस ऊपर टैग करें, अपनी स्क्रिप्ट जोड़ें: यह jQuery की शुरुआत है document.ready दस्तावेज़ पूरी तरह से लोड होने के बाद ब्राउज़र को इस स्क्रिप्ट को लोड करने के लिए कहता है।

के अंदर document.ready फ़ंक्शन, स्थानीय स्टेज में कार्यों को लोड करने के लिए अपनी स्क्रिप्ट जोड़ें और पहले से सहेजे गए किसी भी कार्य को प्राप्त करें: $ (document.ready (फ़ंक्शन () {

1. $ ("# myTasks")। धुंध (फ़ंक्शन () {// जब कर्सर #myTasks तत्व छोड़ देता है
4. localStorage.setItem ('myTasksData', this.innerHTML); // स्थानीय स्टोरेज में सहेजें
7. });
10. अगर (localStorage.getItem ('myTasksData')) // // यदि स्थानीय स्टोरेज में सामग्री है
13. $ ( "# MyTasks") एचटीएमएल (localStorage.getItem ( 'myTasksData'))। // पेज पर सामग्री डालें
16. }
17. });

पूरे पृष्ठ के लिए HTML इस तरह दिखता है:

मेरे कार्य

अपनी सूची के लिए आइटम दर्ज करें। ब्राउज़र इसे आपके लिए संग्रहीत करेगा, ताकि जब आप अपने ब्राउज़र को फिर से खोलें, यह अभी भी यहां होगा।

• कुछ कार्य
• एक और काम