รับงานทำเว็บด้วย Drupal มา (คนจ้างก็อยู่แถวนี้ล่ะ) เนื่องจากเป็นเว็บจับกลุ่มตลาดทั่วไป ผมและนายจ้างเลยเห็นตรงกันว่าควรมี WSYIWYG editor (เว็บที่คนเข้าเขียน Markdown แบบ Blognone คงหาได้ยาก)

การเลือก editor ทำได้ไม่ยาก เพราะ TinyMCE ดูจะเป็น de facto ไปเรียบร้อยแล้ว (คงเป็นเพราะ FCKEditor มันอืดมากถึงมากที่สุด) แถมตัวโมดูล TinyMCE ของ Drupal เองก็พัฒนามากกว่าที่ผมเคยใช้เมื่อชาติปางก่อนมาก

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

เพื่อไม่ให้เหนื่อยฟรี บันทึกไว้เป็นอนุสรณ์

เวอร์ชัน

เวอร์ชันปัจจุบันของ TinyMCE คือ 3.x ซึ่งโมดูลสนับสนุนเฉพาะ Drupal 6.x

เว็บนี้ผมใช้ Drupal 5.x เพราะกลัวปัญหาโมดูลอื่นไม่อัพเดต เลยต้องใช้ TinyMCE 2.x เท่านั้น (ส่วนตัวโมดูล TinyMCE for Drupal ใช้อันเดียวกันได้) ถ้าผิดเวอร์ชัน จะเกิดปัญหาแปลกๆ มากมาย เช่น ปุ่มไม่ขึ้นโดยไม่ทราบสาเหตุ หรือปลั๊กอินใช้ไม่ได้

อ้างอิง: Drupal Forum

การติดตั้ง

ติดตั้ง TinyMCE สำหรับ Drupal ต้องทำ 2 เด้ง คือลง โมดูล TinyMCE ซึ่งเป็นแค่ตัวเชื่อมเฉยๆ ลงใน /sites/all/modules ก่อน จากนั้นดาวน์โหลด TinyMCE ตัวจริงมาจากเว็บของ TinyMCE แล้วก็อปไปใส่ไว้ใน modules/tinymce/tinymce อีกชั้น

อ่านวิธีติดตั้งอย่างละเอียดใน INSTALL.txt ที่มากับโมดูล TinyMCE

Drupal break

ระบบ node ของ Drupal นั้นสนับสนุนแท็ก <!—break—> ซึ่งใช้แยก excerpt ออกจากตัวเนื้อหาเต็ม ปกติถ้าใช้ textarea ธรรมดาก็ไม่ยากอะไร แต่พอมีระบบ WYSIWYG เลยต้องเซ็ตกันเล็กน้อย

โชคดีที่โมดูล TinyMCE เตรียมทางออกไว้ให้แล้ว (ผ่านระบบปลั๊กอินของ TinyMCE ตัวเต็ม) เราแค่ก็อปไดเรคทอรี drupalbreak ของโมดูล TinyMCE ไปใส่ไว้ในไดเรคทอรี plugins ของตัว TinyMCE ตัวเต็ม และตั้งค่าในไฟล์ plugin_req.php อีกนิดหน่อย แล้วไปเพิ่มปุ่มในหน้า config ของ TinyMCE อีกทีหนึ่ง (จะมีให้เลือกสองปุ่ม อีกอันคือ <!—pagebreak—> ไว้ใช้คู่กับโมดูล paging)

อ่านวิธีติดตั้งอย่างละเอียดใน /plugins/drupalbreak/README.txt ที่มากับโมดูล TinyMCE

หมายเหตุ: การเพิ่มปุ่ม <!—break—> จะทำให้ข้อความก่อนและหลัง <!—break—> ติดกัน (ถ้าใช้ input format เป็น Filtered HTML ซึ่งเป็น default) ให้แก้โดยการเพิ่มแท็ก <p> ในรายการแท็กที่อนุญาตของ HTML filter

Compressor

TinyMCE เป็นก้อน javascript (+รูปภาพ) ที่ส่งตรงมาจากเซิร์ฟเวอร์ กว่าจะโหลดขึ้นกินเวลาพอสมควร เราสามารถปรับแต่งประสิทธิภาพได้โดยลงปลั๊กอิน compressor ของ TinyMCE เพิ่มเติม

ปลั๊กอิน compressor ตอนนี้มี 4 ภาษา คือ PHP, ASP.NET, JSP และ CFM สำหรับ Drupal ใช้ของ PHP วิธีลงอ่านได้ตามลิงก์

ที่ต้องระวังคือเรื่องเวอร์ชันของ TinyMCE เช่นกัน โดย TinyMCE 2.x นั้นต้องใช้คู่กับ TinyMCE compressor 1.x เท่านั้น (พลาดมาแล้ว) ส่วน TinyMCE 3.x ถึงจะคู่กับ TinyMCE compressor 2.x

รายละเอียดดูใน: TinyMCE Wiki หรือ เอกสารของ Drupal

Image Upload

ปัญหาสำคัญของ WYSIWYG บนเว็บทุกตัว คือเวลาใส่รูป ผู้ใช้จะคาดหวังการทำงานแบบ Word คือกดปุ่ม Image แล้วขึ้นหน้าต่าง Browse แต่สำหรับเว็บแล้ว เราจะต้องอัพโหลดรูปต่างหาก แล้วค่อยเอา URL มาใส่ในไดอะล็อกของ WYSIWYG

แน่นอนว่าถ้าปล่อยให้เป็นแบบนั้น เจอผู้ใช้บ่นแน่ๆ ทางแก้มีแต่ยากหน่อย ต้องลงโมดูล Images และ Image Assist ช่วย แถมโมดูล Image Assist นั้นจะมีปลั๊กอินแบบเดียวกับ Drupal break ต้องติดตั้งเพิ่มต่างหาก

เอกสารดูได้ในไฟล์ของ Image Assist หรือความคิดเห็นอันนี้ใน Drupal Forum

บั๊กของโมดูล TinyMCE

โมดูล TinyMCE ของ Drupal นั้นใช้ระบบตั้งค่าแบบ profile คือเซ็ตค่าให้กับ TinyMCE ได้หลายแบบ เช่น มีปุ่มไม่เท่ากัน (นับหน่วยเป็น profile) จากนั้นค่อยนำ profile มา assign ให้กับแต่ role อีกที

ปัญหามีอยู่ว่า วิธีจัดความสำคัญของโมดูลดันเป็นแบบนี้

• role: เอา role ที่มี permission ต่ำสุดขึ้นก่อน (anonymous แล้วตามด้วย authorized user)
• profile: เรียงตามตัวอักษร a ถึง z (a สำคัญกว่า)

ดังนั้นถ้าผมมี profile ของ TinyMCE 2 อัน อันแรกสำหรับผู้ใช้ทั่วไป อันที่สองสำหรับสต๊าฟของเว็บไซต์ และถ้าอันแรกมีชื่ออักษรภาษาอังกฤษที่มาก่อนอันที่สอง จะเกิดบั๊กทันที คือสต๊าฟจะเห็น profile อันแรกแทนที่จะเป็นอันที่สอง

วิธีแก้เป็น workaround ง่ายๆ คือตั้งชื่อให้มันเรียงนั่นเอง

รายละเอียดดูในบั๊กนี้ และบั๊กนี้

ไว้เจออะไรใหม่ๆ แล้วจะมาอัพเดตหน้านี้เพิ่ม