คุณสมบัติ HTML5 Contenteditable แก้ไขเนื้อหาเว็บบน Front-end

หนึ่งในคุณสมบัติใหม่ใน HTML5 ที่ดึงดูดให้ฉันเป็นบรรณาธิการส่วนหน้า คุณลักษณะนี้มักใช้ในระบบการจัดการเนื้อหาเพื่อแก้ไขเนื้อหาโดยตรงจากเบราว์เซอร์และมักจะสร้างด้วย JavaScript และ AJAX HTML5 มาเพื่อทำให้กระบวนการใช้งานง่ายขึ้นเล็กน้อย contenteditable คุณลักษณะ.

มันทำอะไร

เมื่อนำไปใช้กับองค์ประกอบใด ๆ คุณลักษณะนี้จะช่วยให้เรา แก้ไข เนื้อหาในนั้นมาดูตัวอย่างด้านล่าง:

 
ครัวซองต์คุกกี้มัฟฟิน Faworki เดนมาร์กบิสกิต Jujubes คุกกี้เค้กผงบิสกิต halvah halvah บิสกิต Gummies เยลลี่บิสกิต.
 
ม้วนติรามิสุช็อกโกแลตแท่งน้ำตาลลูกพลัมคาราเมลม้วนทรูคาราเมล เค้กช็อกโกแลต wypas ฝ้ายขนมไอซิ่ง ใช้งา snaps ชะเอมชะเอมขนมครัวซอง caramels fruitcake ขนมปังขิงบิสกิต ขนมโดนัททอฟฟี่อ้อย.
 
 

ในตัวอย่างนี้เราได้เพิ่ม contenteditable คุณลักษณะและตั้งค่า จริง ดังนั้นเนื้อหาจึงสามารถแก้ไขได้ มีสองค่าอื่น ๆ ที่สามารถเพิ่มสำหรับแอตทริบิวต์นี้;

• เท็จ ซึ่งจะตรงกันข้าม: เนื้อหาจะไม่สามารถแก้ไขได้
• สืบทอด; มันจะเปลี่ยนเนื้อหาที่สามารถแก้ไขได้เมื่อ ผู้ปกครองโดยตรง สามารถแก้ไขได้เช่นกัน.

• ดูการสาธิต

หากคุณได้ลองดูตัวอย่างด้านบนคุณจะเห็นว่าสามารถแก้ไขเนื้อหาได้จากเบราว์เซอร์ อย่างไรก็ตามควรสังเกตว่าองค์ประกอบนี้ไม่ครอบคลุมการจัดเก็บการเปลี่ยนแปลงที่เราทำดังนั้นเมื่อคุณรีเฟรชหน้าเว็บหลังจากที่คุณทำการเปลี่ยนแปลงเนื้อหาจะเปลี่ยนกลับ.

วิธีบันทึกการเปลี่ยนแปลง

การบันทึกการเปลี่ยนแปลงขึ้นอยู่กับว่าเราจะเก็บข้อมูลไว้ที่ใด โดยทั่วไปจะถูกบันทึกไว้ในฐานข้อมูล แต่เนื่องจากเราไม่มีการเข้าถึงฐานข้อมูลในบทช่วยสอนนี้เราจะแสดงวิธีบันทึกการเปลี่ยนแปลง localStorage. ในการทำเช่นนั้นเราจะใช้ jQuery เล็กน้อยเพื่อทำให้โค้ดง่ายขึ้น ฉันขอแนะนำให้คุณดูที่อดีตปัจจุบันและอนาคตของการจัดเก็บในท้องถิ่นสำหรับการใช้งานเว็บเป็นข้อมูลอ้างอิงเพิ่มเติม.

ก่อนอื่นมาเพิ่มกัน ปุ่ม ถัดจากเนื้อหาของเรา.

 
 
ม้วนติรามิสุช็อกโกแลตแท่งน้ำตาลลูกพลัมคาราเมลม้วนทรูคาราเมล เค้กช็อกโกแลต wypas ฝ้ายขนมไอซิ่ง ใช้งา snaps ชะเอมชะเอมขนมครัวซอง caramels fruitcake ขนมปังขิงบิสกิต ขนมโดนัททอฟฟี่อ้อย.
 
 บันทึกการเปลี่ยนแปลง 

แนวคิดนี้คือเราจะจัดเก็บการเปลี่ยนแปลงเมื่อมีการคลิกปุ่ม ดังนั้นให้ตั้งเหตุการณ์นี้ผ่านสคริปต์

 var theContent = $ ('# content2'); $ ('# save'). on ('คลิก', ฟังก์ชัน () var editedContent = theContent.html (); localStorage.newContent = editedContent;); 

รหัสนี้จะสร้างคีย์ใหม่ใน localStorage ที่มีการเปลี่ยนแปลงครั้งล่าสุดในเนื้อหา เราสามารถใช้ Firebug หรือเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์เพื่ออธิบายว่าข้อมูลถูกเก็บไว้เรียบร้อยหรือไม่ แต่ให้แน่ใจว่าคุณกดปุ่ม สำหรับผู้ใช้ Firefox ให้ไปที่ DOM แผงควบคุมและค้นหา localStorage ใน Chrome เช่นเดียวกับ Safari เราสามารถดูได้ในแท็บ 'ทรัพยากร'.

จากนั้นเราสามารถดึงข้อมูลนี้เพื่ออัปเดตเนื้อหาดังนี้

 if (localStorage.getItem ('newContent')) theContent.html (localStorage.getItem ('newContent'));  

รหัสด้านบนจะระบุรายการ newcontent จาก localStorage และถ้ามีอยู่มันจะส่งค่าไปยังองค์ประกอบที่เลือกในกรณีนี้ # content2. เมื่อมาถึงจุดนี้เมื่อเรารีเฟรชหน้าเรายังคงเห็นการเปลี่ยนแปลงที่เราทำ.

• ดูการสาธิต
• แหล่งดาวน์โหลด

ความคิดสุดท้าย

ในวันเก่า ๆ การเพิ่มฟีเจอร์การแก้ไข front-end ดังที่เราได้สาธิตอาจใช้เวลาหลายชั่วโมงหรือหลายสัปดาห์ วันนี้ใช้เวลาเพียงวินาทีเดียวกับแอททริบิวนี้, contenteditable.

และตาม caniuse.com แอตทริบิวต์นี้ได้รับการสนับสนุนแล้ว (น่าประหลาดใจ) ใน IE7 + และ (แปลกใจ) ในเบราว์เซอร์อื่น ๆ ดังนี้ Firefox 12, Chrome 20, Safari 5.1 และ Opera 12 ซึ่งหมายความว่าเราสามารถใช้องค์ประกอบนี้ด้วยความสงบสุข โดยไม่ต้องตั้งค่า fallbacsk สำหรับเบราว์เซอร์รุ่นเก่า.