👩🏽‍🎨 🕐 🏔️ HTML5 में सामग्री संपादन योग्य है 🎅🏼 🤬 🔗

एचटीएमएल 5 के नवाचारों में से एक पृष्ठ के भाग को सीधे ब्राउज़र में संपादित करने की क्षमता है। इस सुविधा को सामग्री संपादन योग्य कहा जाता है । यह सभी आधुनिक ब्राउज़रों में काम करता है। पृष्ठ को संपादन योग्य बनाने के लिए, आपको टैग के लिए विशेषता contenteditable="true" सेट करने की आवश्यकता है। टैग के तहत लगभग सब कुछ हो सकता है: स्वरूपण, चित्र, सूची और यहां तक कि फ्लैश क्लिप के साथ पाठ। लेकिन उपयोगकर्ता केवल पाठ जोड़ सकता है, और कुछ भी वह केवल हटा सकता है। इस पोस्ट में मैं एक वेबसाइट पर सामग्री संपादन योग्य का उपयोग करने का एक उदाहरण दिखाऊंगा।

HTML कोड

 <!DOCTYPE HTML> <html> <head> <title>   HTML5</title> <script type="text/javascript">

बटन क्लिक करें buttonClick() फ़ंक्शन में, "सहेजें" ("संपादित करें") बटन को संसाधित किया जाता है: contentEditable विशेषता में contentEditable , बटन पर शिलालेख और सूची की सामग्री को टेक्स्ट फ़ील्ड में कॉपी किया जाता है।

  function buttonClick () { var div = document.getElementById ("myDiv"); var button = document.getElementById ("myButton"); var content_div = document.getElementById ("ListContent"); var textarea = document.getElementById ("myTextarea"); if (div.contentEditable == "true") { div.contentEditable = "false"; content_div.style.display = "inline"; textarea.innerHTML = div.innerHTML; button.value = ""; } else { div.contentEditable = "true"; content_div.style.display = "none"; button.value = ""; } } </script> </head> <body> <b>  ?</b> (  )

संपादन योग्य div । contenteditable="true" पर ध्यान दें।

  <div id="myDiv" contenteditable="true"> <ul id="todolist"> <li> </li> <li> </li> <li> </li> <li> !</li> </ul> </div>

बटन "सहेजें" ("संपादित करें")। buttonClick() फ़ंक्शन को buttonClick() ।

  <input type="button" id="myButton" onclick="buttonClick();" value=""> <br><br>

एक टेक्स्ट फ़ील्ड जिसमें "सहेजें" बटन दबाकर सूची की सामग्री प्रदर्शित की जाती है।

  <div id="ListContent" style="display: none;">   :<br> <textarea rows="10" cols="70" id="myTextarea"> </textarea> </div> </body> </html>

एक जीवंत उदाहरण यहां देखें।

यहां कोड के साथ संग्रह डाउनलोड करें ।

PS मैं जल्द ही लिखूंगा कि कैसे साइट को सामग्री के उपयोग से ब्राउज़र से पूरी तरह से संपादन योग्य बनाया जाए।

HTML5 में सामग्री संपादन योग्य है

HTML कोड

More articles: