จำลอง WYSIWYG ตามแบบคนจนบน HTML5
คนที่เคยทำเว็บที่มีกล่องข้อความให้กรอกข้อมูลยาวๆ เพื่อนำไปจัดย่อหน้าสวยๆ คงต้องเคยได้ยิน requirement ว่าอยากได้ WYSIWYG บ้างหละ
ถ้าใช้เว็บสำเร็จรูปทั่วไปก็อาจจะไม่ยากเท่าไหร่ เช่น WordPress ที่มี WYSIWYG มาให้แต่เริ่มเลย หรือหากไม่ถูกใจก็ยังมีส่วนเสริม WYSIWYG ให้เลือกติดตั้งเพิ่มได้อีก
แต่ถ้าเริ่มทำเว็บเองจากศูนย์ หรือว่า framework ที่ใช้ไม่ดังพอจนไม่มีใครทำส่วนเสริมนี้ให้หละ? จะพบว่า requirement นี่เป็นสิ่งที่สร้างเองได้ยากมากๆๆๆ
ทางแก้สำหรับเหล่า geek คงเป็นการ “เลิกฝัน” แล้วกลับไปลุยดะกับโค้ดจัดย่อหน้าเลย (ซึ่งก็ไม่จำเป็นต้องยุ่งกับ HTML ตรงๆ อาจเลือกพวกที่เจ็บปวดน้อยลงอย่าง Markdown ก็ได้)
แต่ถ้าแนะนำแบบนี้กับคนทั่วไปที่ชินกับ MS Word คงไม่เวิร์กแน่
จริงๆ ทางออกสำหรับพวกเขาเหล่านั่น อาจไม่ใช่การแก้ไขทุกรายละเอียดผ่านกล่องข้อความในหน้าเว็บก็ได้
เพราะในเมื่อพวกเขาชินกับการใช้โปรแกรม Word อยู่แล้ว ก็ให้แก้ไขอะไรให้เรียบร้อยบน Word ไปเลย เรียบร้อยแล้วลากคลุมสิ่งที่ต้องการ Ctrl+C Ctrl+V มาวางบนกล่องข้อความหน้าเว็บก็พอ
ส่วนกล่องข้อความก็เปลี่ยนจาก <textarea> ไปเป็น <div contenteditable> แทน เท่านี้ก็เรียบร้อย (แล้วไปหาวิธีเซฟ/โหลดข้อความที่ <div> แทน ซึ่งไม่ยุ่งยากหรอกในโลกที่มี jQuery ให้ใช้ :P)
อยากลองเล่น? ขั้นแรกให้พิมพ์ตามนี้ลงไปใน address bar ของเว็บเบราเซอร์เพื่อสร้าง WYSIWYG ก่อนครับ
data:text/html, <html contenteditable>
ขั้นต่อมาก็ไปเปิดเอกสาร Word ซักอัน (หรือจะสร้างใหม่ก็ได้) แล้วลองคัดลอกข้อความมาวางบนหน้าเว็บนั้นดู
ส่วนอะไรที่เวิร์กไม่เวิร์กบ้าง เท่าที่ลองคร่าวๆ ได้ผลตามตารางนี้ครับ
การจัดรูปแบบ แท็กที่ใช้แทน MS Word LibreOffice Google Docs Title <p align="center"><font size="6">✓ ✓ ✓ Subtitle <p align="center"><font size="5">✓ ✓ ✓ Heading 1-3 <h1>-<h3>✓ ✓ ✓ Heading <font size="4">✓ ✓ ✓ Quotations <blockquote>✓ ✓ ✓ Align Left <p align="left">✓ ✓ ✓ Align Center <p align="center">✓ ✓ ✓ Align Right <p align="right">✓ ✓ ✓ Align Justify <p align="justify">✓ ✓ ✓ Bold <b>✓ ✓ ✓ Italic <i>✓ ✓ ✓ Underline <u>✓ ✓ ✓ Strikethrough <strike>✓ ✓ ✓ Superscript <sup>✓ ✓ ✓ Subscript <sub>✓ ✓ ✓ Table <table>,<tbody>,<tr>,<td>✓ ✓ ✓ Bullet List <ul>,<li>✓ ✓ ✓ Numbering <ol>,<li>✓ ✓ ✓ Image <img src="data:image/png;base64,...">✓ ✓ Formula <img src="data:image/png;base64,...">✓
(จากที่สังเกต ผลลัพธ์ตอนนำข้อความมาวาง เหมือนจะ ไม่มีความต่างกันในแต่ละเว็บบราวเซอร์ ดังนั้นจึงสนใจเฉพาะตอนคัดลอกมาจากโปรแกรมแก้ไขเอกสารอย่างเดียวครับ)
author