ด้วยความที่อยากหา Editor เทพๆ สักตัวมาใช้ในการเขียนบทความลงบล็อก ซึ่งก่อนหน้านี้ตอนใช้ Drupal ก็ได้ใช้ CKEditor (ติดตั้งแบบ Module ใน Drupal) มาก่อนซึ่งถือว่าตอบโจทย์ได้ดีทีเดียว ก็เลยคิดจะเอามาใช้ในเว็บนี้ ตอนแรกก็คิดอยู่เหมือนกันว่ามันจะยุ่งยากรึป่าว ซึ่งตอนนี้บอกได้เลยว่ามันง่ายโครตๆ แค่บรรทัดเดียวเท่านั้น
ก่อนอื่นขออธิบายก่อนหละกันว่า WYSIWYG คืออะไร WYSIWYG หรือที่อ่านกันว่า วิซซีวิก นั้นย่อมาจาก What You See Is What You Get ซึ่งก็ในทางคอมพิวเตอร์จะหมายถึง ระบบเนื้อหาระหว่างการแก้ไข และเนื้อหาเมื่อแก้ไขเสร็จแล้วมีหน้าตาและรูปแบบเดียวกัน (จาก Wiki)
เอาหละเริ่มกันเลยละกัน ก่อนอื่นก็ไปดาวน์โหลด CKEditor ได้จาก http://ckeditor.com/download จากนั้นเราก็จะได้ไฟล์ ckeditor_3.6.zip มา ก็ทำการแตกไฟล์ให้เรียบร้อย
สำหรับตัวอย่างในการใช้งานและการ config ต่างๆ ก็ดูได้จากในโฟลเดอร์ _samples ครับ ข้ามมาถึงวิธีก่อนติดตั้งใช้งานเลยละกัน ก่อนผมอื่นผมก็จะทำการลบ โฟลเดอร์ _samples และ _source ทิ้งไปก่อน จากนั้นก็อัพโหลดโฟลเดอร์หลักนั้นก็คือ ckeditor เข้าไปใน Server ของเรา
ก่อนอื่นเลยก็ใส่ทำการเรียกไฟล์ ckeditor จากไดเรคทอรี่ที่คุณอัพด้วย code ข้างล่างนี้ ใส่ลงในไฟล์ HTML ของคุณ

view plaincopy to clipboardprint?

1. <script src="ckeditor/ckeditor.js" type="text/javascript"></script>  

สำหรับวิธีเรียกใช้งานแบบง่ายๆ มี 2 วิธีต่อไปนี้
วิธีแรกก็คือกำหนด Class="ckeditor"  ใน textarea ของคุณ

view plaincopy to clipboardprint?

1. <textarea name="editor1" class="ckeditor"></textarea>  

และอีกวิธีก็ง่ายเช่นกันคือ การใช้ JavaScript Code และก็กำหนด id ของ textarea ของคุณ

view plaincopy to clipboardprint?

1. CKEDITOR.replace( 'textarea_id' );  

CKEDITOR.replace( 'textarea_id' );

สำหรับคนที่อยาก config เพิ่มเติมก็ไม่ยาก ลองไปศึกษาในโฟลเดอร์ _samples ดูจะเห็นว่ามีตัวอย่างการใช้งานทั้งหมดอยู่แล้ว
ดู Demo ได้ที่ http://ckeditor.com/demo

   

 

Categories

 

• Coding

  ประวัติ

น.ส. นัทมล พลดงนอก

ชั้น ม.6/2 เลขที่5

โรงเรียนนาสวรรค์พิทยาคม

ต.นาสวรรค์ อ. เมืองบึงกาฬ จ. บึงกาฬ

รหัสไปรษณี 38000

ความรู้ที่ได้รับ
ได้ความรู้ว่าเมื่อเราไม่ไช้โปรแกม wysiwyg เวลาเราเขียนตัวเอน หรือตัวหนาเวลาพิมพ์ออกมาก็จะเป็นตัวธรรมดา

แสดงความคิดเห็น

 ถ้าเรามีโปรแกมนี้มีอยู่ก็จะได้ไช้งานหรือทำงานได้สะดวก

WYSIWYG คืออะไร

        WYSIWYG (ออกเสียง "wiz-ee-wig") editor หรือโปรแกรมที่ยอมให้ผู้พัฒนาเห็นผลลัพธ์สุดท้ายที่จะมองเห็น ขณะที่อินเตอร์เฟซหรือเอกสารได้รับการสร้างขึ้น WYSIWYG เป็นตัวย่อของ "what you see is what you get" WYSIWYG editor สามารถขัดแย้งกับ editor แบบเดิมที่ต้องการให้ผู้พัฒนาเข้าคำสั่งอธิบาย (หรือ markup) และไม่อนุญาตวิธีในการมองเห็นผลลัพธ์ของ markup ทันที WYSIWYG editor เป็นจริงครั้งแรกกับโปรแกรมประมวลผลคำเรียกว่า Bravo คิดค้นโดย Charles Simonyi ที่ Xerox Palo Alto Research Center ในทศวรรษ 1970 นี่กลายมาเป็นพื้นฐานงานของ Simonyi ที่ Microsoft และปฏิรูปเป็นโปรแกรมประยุกต์ WYSIWYG ชื่อ Word และ Excel
HTML WYSIWYG editor เช่น FrontPage ของ Microsoft หรือ PageMill ของ Adobe ห่อหุ้ม markup และอนุญาตผู้พัฒนาเว็บเพจให้คิดถึงภาพทั้งหมดของการปรกาฎของเนื้อหา อย่างไรก็ตาม ต้องมีการแลกคือ บางครั้ง HTML WYSIWYG editor แทรกคำสั่ง markup ที่คิดว่าจำเป็นทั้งหมด จากนั้น ผู้พัฒนาต้องรู้เพียงพอเกี่ยวกับภาษา markup เพื่อกลับไปสู่คำสั่งต้นแหล่งและทำความสะอาด
wysiwyg   

บทความนี้มีชื่อเป็นภาษาอังกฤษ เนื่องจากยังไม่มีชื่อภาษาไทยที่กระชับ เหมาะสม หรือไม่รู้วิธีอ่านในภาษาไทย

WYSIWYG (อ่านว่า "วิซซีวิก"^[1]) ย่อมาจาก What You See Is What You Get เป็นคำศัพท์เฉพาะในทางคอมพิวเตอร์ หมายถึงระบบเนื้อหาระหว่างการแก้ไข และเนื้อหาเมื่อแก้ไขเสร็จแล้วมีหน้าตาและรูปแบบเดียวกัน ตัวอย่างเช่น โปรแกรมตระกูลโปรแกรมประมวลผลคำ หรือโปรแกรมช่วยสร้างเว็บเพจ เป็นต้น