แหม…..ไม่ได้แวะมาเขียนซะนานเลย อันนี้ต้องขอโทษขอโพย กันสักหน่อยครับ สำหรับคนที่ติดตามมาตลอด เนื่องจากพักหลัง ๆ ต้องเคลียร์งานก่อนสอบ และต่อเนื่องด้วยโปรเจ็คชิ้นโต ที่ทำให้ปวดหัวใช่เล่นเลย เพราะถ้าไม่ได้ตามต้องการ ก็ไม่มีโอกาสจบ ฮา…..เอาล่ะ เรื่องนั้นไว้เคลียดกันต่อ วันนี้เรามาต่อเรื่องราวบทความให้จบกัน ไปเลยครับ….

เราจะไม่พูดพร่ำทำเพลงนะครับ ไปเลยดีกว่า เราจะเอาแบบ step by step เริ่มจากการสร้างไฟล์ไปจนถึงเสร็จงานชิ้นนี้ เรามาเริ่มเลยดีกว่า

เริ่มสร้างไฟล์

หวังว่ายังคงจำคราวก่อนกันได้(นานมากอ่ะนะ) ถ้าจำไม่ได้ก็ไปอ่านก่อนนะ คลิกอ่าน ว่า path หรือตำแหน่งไฟล์ที่เราจะสร้างนั้นควรอยู่ตรงไหน ถ้าเราจำกันได้ ก็เริ่มเลยดีกว่า เราจะมาสร้างกันตรงไหนนะครับ ….ถูกต้องครับ เราจะมาสร้างกันที่นี่เลย C:/WM/www/nicEditor/ชื่อไฟล์เรา หรือถ้าใครใช้ Appserv ก็ตาม path นี้เลย C:/Appserv/www/nicEditor/ชื่อไฟล์เรา นะครับ ในที่นี้ผมจะสร้างเป็นไฟล์ชื่อว่า index.html เลยนะครับ

1. คลิกขวาที่เมาส์ บนพื้นที่ว่าง ๆ นะครับ

2. ไปที่เมนูคำสั่ง New

3. เลือกที่เมนูคำสั่ง Text Document

4. เราก็จะได้ผลลัพธ์ ดังตัวอย่างภาพครับ

5. ก็ให้ท่าน พิมพ์ชื่อไฟล์เข้าไปใหม่ อันนี้ก็แล้วแต่ว่าจะตั้งกันยังไง ในที่นี้ผมตั้งเป็น  index.html ครับ

ใส่โค๊ด

เราก็จะได้ไฟล์ index.html ตามที่เราต้องการล่ะ ที่นี้เราก็จะทำการเพิ่มโค๊ดการทำงานให้กับไฟล์เรา ในที่นี้ผมจะใช้เป็น Editplus นะครับ แต่ถ้าท่านจะเปิดด้วย Dreamwever ก็ได้เช่นกัน ถ้าเครื่องของท่านติดตั้งโปรแกรม Dramwever ไว้ สัญลักษณ์ที่อยู่หน้าไฟล์จะเป็นรูปของ Dreamwever อัตโนมัติ ท่านสามารถดับเบิลคลิก(สองครั้งเร็วๆ ) เพื่อเข้าไปสู่โปรแกรมได้เลยครับ

6. คลิกขวาที่ไฟล์ (กรณีใช้ Editpus แต่ถ้าเป็น Dremwerver ก็ได้ชี้แจงดังข้างต้นแล้ว)

7. เลือกไปที่เมนูคำสั่ง Open With เพื่อเลือกเปิดกับโปรแกรมต่าง ๆ

8. ก็ให้เลือกไปที่โปรแกรม Editplus เลยครับ

9. พอเข้ามาในโปรแกรม Editplus แล้ว ก็ให้พิมพ์โครงสร้าง html เลยครับ ดังภาพ (วิธีการสร้างแบบลัด ๆ สามารถหาอ่านได้จากหัวข้อที่เกี่ยว Editplus )

10. ดึงไฟล์สคริปต์ nicEditor เข้ามาเพื่อเรียกใช้งาน ให้อยู่ในขอบเขตของ tag <head>ตรงนี้แหละ</head> ด้วยนะครับ ทำแบบนี้ไปก่อน เพราะเขาแนะนำมา (แต่ที่จริงจากประสบการณ์อันน้อยนิดของผม ไม่ต้องก็ได้ครับ แล้วค่อยไปว่ากันยาวๆ)

*** ตรงที่ไฮไลท์ไว้ คือตำแหน่งของไฟล์นะครับ ในที่นี้มันอยู่ที่เดียวกับไฟล์ index.html เรา ก็เลยใช้แบบนี้ แต่ถ้าในกรณีที่เราได้จัดสรรส่วน ให้เป็นระเบียบเช่น  ทำโฟลเดอร์เก็บ javascript ไว้ต่างหาก ตั้งชื่อว่า js  เวลาเราเรียกดึงเข้ามา เราก็จะต้องเพิ่มตำแหน่งอ้างอิงให้ตรงกันด้วยเป็น <script scr=”js/nicEdit.js”…….> เป็นต้น

11. กำหนดค่าเริ่มต้นให้กับสคริปต์ nicEditor ที่เราดึงมาครับ ก็แนะนำให้ทำตามก่อน เจาะลึกและดัดแปลงเราจะมาพูดกันในขั้นที่ Advance กว่านี้ครับ

12. เราก็ได้ดังไฟล์ที่เกี่ยวข้อง พร้อมทั้งกำหนดค่าเริ่มต้นแล้ว ต่อไปเราก็จะนำไปใช้งานล่ะ ซึ่งส่วนที่เป็นโค๊ดการทำงาน เราก็จะวางไว้ใน tag <body>…….</body> ถูกต้องไหมครับ และสคริปต์ตัวนี้ เราก็ต้องใช้ควบคู่กับพวก <text area> เพราะฉนั้น เรามาลุยกันต่อเลย

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

13. เรามาดูโค๊ดทั้งหมดกันครับ

ผลลัพธ์การทดลอง

14. เรามาดูผลลัพธ์กัน ก็จะได้ดังภาพด้านล่างนี้นะครับ ถ้าเรากำหนดความกว้าง สูง เท่าไหร่ ก็จะได้ตามนั้น

ผลลัพธ์ออกมาก็อย่างที่เห็นครับ ก็หวังว่าคงมีประโยชน์สำหรับคนที่ทำเกี่ยวกับบทความ ข่าว หรือเว็บบอร์ดที่ไม่อยากให้ช่องกรอกข้อมูลนั้นมันธรรมดา อยากให้ลูกเล่นกัน ผมได้ลองใช้มาพักหนึ่งน่ะ ลองใช้ดูก่อนครับ สำหรับผมใช้ไปใช้มา ทั้งหมดที่เป็น tag ของ <textarea> มันก็จะเป็นแบบนี้หมดเลย แต่ถ้าในกรณีที่เราอยากให้บางที่เป็น บางที่ไม่เป็น จะทำอย่างไร อ่ะ ๆ….บางคนรู้แล้ว ก็อุ๊บไว้ครับ หรือถ้ามีไอเดียเจ๋ง ๆ ก็บอกกันด้วยเน้อ แต่ผมก็มีวิธีแก้แล้วล่ะ แต่ไม่บอกตอนนี้ครับ เอาไว้เจอกันในบทความต่อไปกัน ตอนนี้ไปเร่งโปรเจ็คต่อก่อน หนีมาทำบทความนานแหละ เจอกันใหม่ครับ……………

……………………

เครดิต

http://nicedit.com/examples.php

Update: 2009-08-14

เปลี่ยนชื่อหัวเรื่องจาก  มาใช้งาน text editor ที่ชื่อว่า NicEdit ตอนที่ 2[ทดลองใช้งาน]