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

ถ้าใครเคยอ่านบทความที่เกี่ยวกับ text editor (ถ้ายังไม่อ่าน ก็แวะไปอ่านก่อนนะ คลิก) ผมได้บอกแล้วว่าผมชอบ NicEdit มากเลยเพราะดูแล้วเรียบง่าย เข้ากับสไตล์การใช้ชีวิตผมซะเหลือเกิน เลยจะยกตัวนี้มาเป็นตัวอย่างใช้งานกันก่อน ผมได้แยกเป็นตอนเอา เพื่อให้ง่ายต่อผู้ศึกษา ซึ่งมีทั้งผู้เริ่มต้น และผู้นำนาญแล้ว จึงต้องแยกกัน ถ้าผู้ที่เคยทำมาก่อน ก็ข้ามไปบทความตอนที่ 2 ได้เลย สำหรับตอนนี้ เหมาะสำหรับผู้ที่เริ่มต้น เรามาเริ่มกันเลยดีกว่า

หาตัว Editor มาก่อน [ ดาวน์โหลด ]

ถ้าใครระดับเทพแล้วก็ข้ามไปขั้นตอนต่อไปเลยนะครับ สำหรับมือใหม่ ก็ดูภาพประกอบด้วยเด้อ

1. คลิก http://nicedit.com/nicEdit-full.zip  เพื่อทำการดาวน์โหลดตัว editor

(เปลี่ยน ตำแหน่งดาวน์โหลดใหม่ ได้ที่ http://nicedit.com/archive/nicEdit-0.26.zip ขอบคุณ ไม่มีตัวตนที่แจ้งการอัพเดตลิงค์มาใหม่ หาให้แล้วน่ะ ขั้นตอนต่อไปก็ยังคงเหมือนเดิมนะครับ เพียงแต่ชื่อไฟล์ที่ซิปมานั้น อาจต้องเปลี่ยนแปลงไปบ้าง แต่ก็ยังคงทำเหมือนเดิม 25 มีนาคม 2551)

2. คลิก Save เพื่อเก็บข้อมูลไว้ในเครื่องเราครับ

3. เลือกตำแหน่งที่จะเก็บไฟล์ข้อมูลในเครื่องเราครับ ในที่นี้ผมไว้ที่ Desktop

4. คลิก Save เพื่อเก็บข้อมูล

5. รอจนกว่าจะดาวน์โหลดเสร็จครับ พอเสร็จก็คลิก Close เพื่อปิดหน้าต่างเลย

หมายเหตุ *บางคนอาจจะถามว่า มีปุ่ม button ให้ 3 ปุ่ม อีก 2 ปุ่มคลิกไม่ได้เหรอ คำตอบคือ ได้ครับ โดยที่ปุ่ม open และ Open Folder นั้นก็จะเข้าไปที่ไฟล์โดยตรงเลย ซึ่งข้อมูลที่เราดาวน์โหลดมานั้นเป็นไฟล์ที่เขา .zip มา ถ้าเราเลือก เราก็จะไปที่โปรแกรม winzip หรือ winrar อัตโนมัติ เพื่อไม่ให้งง ผมเลย แยกไปอธิบายดังขั้นต่อไป

6. ข้อมูลได้มาแล้ว

คลายซิป ไฟล์ที่ดาวน์โหลดมา

7. คลิกขวาที่ไฟล์ แล้วเลือกที่ Extract to nicEdit-full เพื่อคลายซิป

8. เราก็จะได้ไฟล์ที่เป็น Folder nicEdit-full เรียบร้อยแล้ว

9. เข้าไปข้างในกัน เนื่องจากไฟล์ที่เราซิปนั้น เวลาเราคลายเสร็จ จะมีการซ้อน Folder อีกที เช่น ในที่นี้เรามีไฟล์ซิปชื่อว่า nicEdit พอคลายซิปออกมาจะได้ nicEdit ข้างในอีกโฟลเดอร์หนึ่งซ้อนข้างใน เพื่อให้ง่ายต่อการอ้างอิงในการใช้งานเราก็ควรจะเอาออกไปเฉพาะโฟล์เดอร์ใน ก่อนอื่นดับเบิลคลิก เข้าไปก่อน

หมายเหตุ *ถ้าเราไม่ทำเช่นนี้ เราก็จะอ้างอิงเวลาเราทดสอบสคริปต์จะพิมพ์แบบนี้ http//localhost/nicEdit/nicEdit/ แต่ถ้าเราตัดไปเฉพาะข้างใน ก็จะลดการอ้างอิงลงมาดังนี้ http://localhost/nicEdit/ เห็นไหมว่าง่ายกว่า

ย้ายไปไว้ใน web server (จำลอง) เพื่อจะทดสอบ

10. คลิกขวาที่ไฟล์ และไปที่เมนูคำสั่ง copy เพื่อคัดลอกข้อมูลไปที่ web server (จำลอง) ถ้ายังไม่รู้จัก web server และยังไม่ได้ติดตั้ง ก็ไปอ่านนี้เลย  จำลองเครื่องให้เป็น Server เพื่อเขียนเว็บไซต์กัน(wmservertools)

11. ที่นี้ก็เอาข้อมูลที่ copy เมื่อกี้ไปวางไว้ที่ตำแหน่ง C:/WM/www/ หรือถ้าใคร Appserv ก็วางไว้ที่ C:/Appserv/www/ ถ้าไม่เข้าใจ อ่านเพิ่มเติมได้ที่  “เอาโค๊ดโปรแกรมเว็บ ไปวางที่ไหน ถึงจะรันบน Web server จำลองได้???”

12. ไฟล์มาเรียบร้อยโรงเรียนคนเขียนเว็บ แล้ววววววววว อิอิ

ทำความรู้จักหน่อย ว่าข้างในมีไรกันบ้าง

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

14. ภาพไฟล์ที่อยู่ด้านในครับ เรามาดูกันว่ามีอะไรกันบ้าง

  • src  เป็นโฟลเดอร์ที่เก็บไฟล์ตัว javascript ครับ เดี๋ยวเราจะตามเข้าไปดูกันอีกที ว่ามีอะไร
  • LICENSE  อันนี้เป็นไฟล์ที่เป็นเรื่องของการยินยอมให้เรานำไปใช้ว่าต้องอยู่ในขอบเขตไหนครับ
  • nicEdit.js อันนี้เป็นไฟล์ javascript ที่จำเป็นต้องใช้ เดี๋ยวค่อยมาดูกันอีกที
  • nicEditorIcons.gif เป็นภาพที่เขานำมาเป็นภาพสัญลักษณ์เครื่องมือที่เราจะใช้

15. เราจะไปดูกันต่อที่ไฟล์ในโฟลเดอร์ src กันต่อว่ามีอะไรบ้าง ก็ดับเบิลคลิก เข้าไปเลย

16. ภาพไฟล์ที่อยู่ด้านใน เรามาดูกันว่า มีอะไรกันบ้าง

  • bkLib.js เป็นไฟล์ javascript ที่เป็นฟังก์ชั่นไลบรารี่ ของระบบ
  • nicConfig.js เป็นไฟล์ javascript ที่เป็นตัวกำหนดค่าเริ่มต้นต่าง ๆ รายละเอียดไว้ตอนต่อไป
  • nicEdit.js เป็นไฟล์ javascript ที่รวบรวมฟังก์ชั่นการทำงานเกือบทั้งหมด
  • nicLicense.js เป็นไฟล์ javascript ที่เป็น comment ของเจ้าของผลิตภัณฑ์นี้ครับ

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

****************************

update: 2009-08-14

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