ลองก้อปปี้โค้ดนี้ไปลองรันในเครื่องท่านเพื่อทำการทดสอบกันสักหน่อยก่อน

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Can Edit</title>
</head>
 
<body contentEditable="true"> </body>
</html>

หลังจากลองรันขึ้นมาแล้ว ท่านจะเจอกับหน้าขาววอกๆ ไม่มีอะไรพิศดาร แต่เดี่ยวก่อน ลองเอาเมาส์คลิกลงไปบนหน้าขาวๆ นั้นแล้วลองพิมพ์คำอะไรก็ได้ดู

หน้าเว็บเพจมันพิมพ์ตัวอักษรได้ด้วย ตอนที่ผมทำได้เมื่อหลายปีก่อน ผมตื่นเต้นน่าดู ทีนี้มาดูกันว่าอะไรที่ทำให้หน้าเว็บเพจสามารถพิมพ์ข้อความลงไปได้

contentEditable="true"

attribute นี้เองที่ทำให้อิลิเม้นท์ใดๆสามารถพิมพ์ข้อความลงไปได้ โดยถ้าเราต้องการให้บางตำแหน่งในเว็บเพจพิมพ์ข้อความลงไปได้ เราก็แค่กำหนด

contentEditable="true"

ให้กับ div หรืออิลิเม้นท์ที่ต้องการ

<div contentEditable="true"></div>

ทีนี้ถ้าต้องการหยิบเอาข้อความที่ยูสเซ่อพิมพ์เข้าไปทำอะไรต่อ เราก็ใช้ javaScript หยิบมันขึ้นมา

TinyMCE ก็ใช้ attribute นี้ในการสร้าง WYSIWYG Toolbox ให้เราใช้งาน

TinyMCE
Avatar

วัชรเมธน์ ชิษณุคุปต์ ศรีเนธิโรทัย

Programmer, Blogger

ชีวิตมันคือการเดินทางเพื่อค้นหาอะไรบางอย่าง และเพื่อค้นพบอะไรบางอย่าง สิ่งที่รู้แล้วจะได้บอกกล่าวให้คนข้างหลังได้ฟัง เพื่อเดินลุยเข้าไปในพงหนามอย่างเตรียมใจไว้แล้วว่าอาจจะต้องเจ็บ