ก็ไม่มีไรมากครับ พอดีครั้งหนึ่งผมเคยใช้ cms และเห็นเครื่องมือที่ใช้ในการเขียนบทความต่าง ๆ เลยรู้สึกว่ามันง่ายจัง และอยากทำแบบนั้นบ้าง เลยคิดสงสัยว่า เขาทำเครื่องมือในการสร้างบทความต่าง ๆ ได้อย่างไร ทำไมคล้าย ๆ กับที่เราทำใน dreamwever จัง หรือใน word จัง เลยค้นหาดู และไปเจอข้อมูลหลายเว็บมาก ซึ่งนานมาแล้ว และตอนนี้มีหลายค่าย มากเลย จึงรวบรวมให้ให้อ่านดู ซึ่งก็มีหลายเว็บรวบรวม แต่ผมรวบรวมเอาที่เขา มารวมอีกที เยอะกว่าเห็น ๆ ก็ต้องให้เครดิตกับเว็บเหล่านั้นครับ…

คงไม่เสียเวลามาอธิบายกันให้มาก เรามาทำความเข้าใจกันก่อนว่ามันคืออะไร

text editor คืออะไร

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

เกี่ยวอะไรกับเว็บไซต์

เมื่อก่อน เวลาเราจะทำนำเสนอข้อมูลบนเว็บไซต์นั้น ก็ต้องใช้เครื่องมืออย่าง dreamwever ทำถึงจะดูง่าย พอทำเสร็จก็เอาขึ้นไปบนโฮสต์ หรือเอามาแสดง เวลาจะแก้ไขก็ต้องเอามาแก้ไขที่ dreamwever อีกทีหนึ่ง หรือถ้าใครเขียนสคริปต์โปรแกรมเอง ก็จะแก้ไขโค๊ดเอง ซึ่งดูแล้วมันยุ่งยาก เสียเวลา ด้วยความคิดแบบนี้เอง จึงมีหลายบริษัทเขียนตัว text editor นี้ขึ้นมา เพื่อสนองความต้องการของเรา เพื่อให้เราสามารถแก้ไขบทความต่าง ๆ บนเว็บไซต์ให้ง่ายขึ้น ในความเข้าใจผมเอง คิดว่า เดิมทีเขาพัฒนามาใช้ร่วมกับ cms (ถ้าไม่เข้าใจแนะนำไปอ่านบทความในหัวข้อ cms ครับ) และต้องทำเป็นลักษณะโปรเจ็ค ๆ หนึ่ง เพื่อให้เป็น component ๆ หนึ่งใน cms แต่เนื่องจากโปรแกรมเมอร์ไม่ได้ใช้ cms กันเสมอไป จึงต้องพัฒนามาเป็นส่วน ๆ เพื่อที่จะใช้งานได้ทั่ว ๆ ไป (อันนี้ความคิดเห็นส่วนตัวนะ ผมก็ยังไม่ได้อ่านที่มาที่ไปของมันสักเท่าไหร่)

ตัวอย่างของ text editor

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

JTagEditor อันนี้ข้อมูลจาก itumweb.com บอกว่า มีรูปแบบให้ใช้งานการหลายแบบเช่น Html editor example, Wiki syntax editor example, Textile editor example, BBCode editor example

เว็บไซต์ผู้ผลิต : www.jaysalvat.com/ ทดลองใช้: http://markitup.jaysalvat.com/examples

ดาว์นโหลด :http://markitup.jaysalvat.com/downloads

TinyMCE อันนี้จะเขียนด้วย javascript (เท่าที่แปลมาจากเว็บไซต์เขา)

เว็บไซต์ผู้ผลิต :http://www.moxiecode.com/ทดลองใช้:http://tinymce.moxiecode.com/examples/full.php

ดาวน์โหลด : http://tinymce.moxiecode.com/download.php

WidgEditor ตัวนี้ก็เขียนจาก javascript เช่นกัน

เว็บไซต์ผู้ผลิต : http://www.themaninblue.com/

ทดลองใช้+ดาวน์โหลด : http://www.themaninblue.com/experiment/widgEditor/

FCKeditor ตัวนี้จะคล้าย ๆ กับ word เลย อันนี้ผมได้ลองใช้แล้ว ซึ่งทำระบบให้ http://www.thaiagro.com/ เขา ก็ใช้ได้ดีพอสมควร การปรับแต่งอะไรก็ไม่ค่อยยุ่งยาก อันนี้ผมศึกษาข้อมูลมาจาก http://www.scriptdd.com/ ว่าง ๆ ก็เลยไปสำรวจดูครับ

เว็บไซต์ผู้ผลิต : http://www.fckeditor.net/ ทดสอบใช้ : http://www.fckeditor.net/demo

ดาวน์โหลด : http://www.fckeditor.net/download

SPAW Editor ตัวนี้ผมก็ทดลองใช้แล้ว ก็คือเว็บไซต์นี่แหละ ที่ผมใช้ ซึ่งบทความหลัง ๆ มา ผมก็ทำจาก text editor ตัวนี้ ผมชอบตรงรูปแบบสวยงาม และวิธีการใช้งานภาพ ลักษณะจะคล้าย ๆ กับเราใช้งานวินโดว์ คืออยากได้ภาพไหนก็เลือกเอาเลย

เว็บไซต์ผู้ผลิต : http://www.solmetra.com/

ทดสอบใช้ : www.solmetra.com/en/disp.php/en_products/en_spaw/en_spaw_demo

ดาวน์โหลด : www.solmetra.com/en/disp.php/en_products/en_spaw/en_spaw_download

RichTextEditor อันนี้เขียนด้วย javascript ครับ

เว็บไซต์ผู้ผลิต : http://www.freerichtexteditor.com/

ทดลองใช้ : http://www.freerichtexteditor.com/index.php?inc=demo/index

ดาวน์โหลด : http://www.freerichtexteditor.com/download/

Wyzz WYSIWYG Editor เขียนจาก javascript อีกแล้ว

เว็บไซต์ผู้ผลิต : http://www.wyzz.info/ ทดลองใช้ : http://www.wyzz.info/demo.php

ดาวน์โหลด : http://www.wyzz.info/downloads_page.html

YUI Rich Text Editor เป็น text editor ของ yahoo เขาครับ มีวิธีการใช้งานบอกอยู่ด้วย

เว็บไซต์ผู้ผลิต +ทดลองใช้ + ดาวน์โหลด: http://developer.yahoo.com/yui/editor/

Xinha Html Editor ตัวนีเขาพัฒนามาใช้ร่วมกับ firefox browsers ด้วย

เว็บไซต์ผู้ผลิต : http://xinha.webfactional.com/

ทดลองใช้ : http://xinha.webfactional.com/wiki/Examples จะมีให้เลือก 3 แบบเลย

ดาวน์โหลด : http://xinha.webfactional.com/wiki/DownloadsPage

WYMeditor อันนี้ก็เขียนจาก javascript

เว็บไซต์ผู้ผลิต : http://www.wymeditor.org/ ทดลองใช้ : http://demo.wymeditor.org/demo.html

ดาวน์โหลด : http://drupal.org/project/wymeditor

NicEdit อันนี้ผมชอบมากเลย แต่ยังไม่ได้เอามาใช้ เขียนจาก javascript ร่วมกับ Ajax

เว็บไซต์ผู้ผลิต : http://nicedit.com/ ทดลองใช้ : http://nicedit.com/demos.php

ดาวน์โหลด : http://nicedit.com/download.php

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

………………………………….

เครดิต

http://www.itumweb.com/?p=24 (เว็บหายล่ะ)

http://www.dezinerfolio.com/2008/01/10/drupal-wysiwyg-text-editors-modules/