Tiny Tiny MCE Tweak

Tiny Tiny MCE เป็น "มอดยูล" ของ Drupal เอาไว้เชื่อมต่อกับ TinyMCE ถือเป็นทางเลือกหนึ่งนอกจากมอดยูล TinyMCE Editor ที่ไม่มีคนทำต่อแล้ว และ Wysiwyg API ที่ยังห่วยอยู่

ปัญหาของ Tiny Tiny MCE คือหน้าจอตั้งค่ามันฮาร์ดคอร์มาก ไม่มี GUI มีแค่ textbox ให้เราใส่ไฟล์คอนฟิกลงไปลุ่นๆ ต้องใช้เวลานั่งศึกษาอยู่พอสมควร สรุปว่าขั้นตอนการติดตั้ง และปรับแต่ง ทำดังนี้

• ติดตั้ง Tiny Tiny MCE ใน /sites/all/modules (ผมลองใน /site/default/modules ก็ใช้ได้)
• ติดตั้ง Tiny MCE ใน tinytinymce/tinymce
• เนื่องจาก pagebreak ของ TinyMCE ใช้แท็กไม่ตรงกับของ Drupal ต้องแก้โดยก็อปไฟล์ใน tinytinymce ไปทับ

tinytinymce$ cp -r tinymce-jscripts-tiny_mce-plugins-pagebreak/* tinymce/jscripts/tiny_mce/plugins/pagebreak/

• เปิดใช้มอดยูล tinytinymce ตามปกติ
• เข้าไปใน admin/settings/tinytinymce ในช่อง init script for advanced mode ตั้งค่าตามสะดวก ของผมเน้น minimalism ตั้งตามนี้

tinyMCE.init({
   mode : "exact",
   file_browser_callback: "imceImageBrowser",
   init_instance_callback : "resizeEditorBox",
   theme : "advanced",
   convert_urls : false,
   plugins : "pagebreak",
   theme_advanced_buttons1 : 
        "bold,italic,underline,|,justifyleft,justifycenter,justifyright,|,bullist,numlist,|,
        outdent,indent,|,link,|,forecolor,backcolor,pagebreak,code,",
   theme_advanced_buttons2 : "",
   theme_advanced_toolbar_location : "top",
   theme_advanced_toolbar_align : "left",
   theme_advanced_statusbar_location : "bottom",
   theme_advanced_resizing : true,
   extended_valid_elements : "a[name|href|target|title|onclick], 
        img[style|class|src|border=0|alt|title|hspace|vspace|width|height|align|name],
        hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
   content_css: "/blognone/sites/default/themes/blognone/style.css"
}); 

คำอธิบายพอสังเขป

• plugins ปลั๊กอินทีเปิดใช้ เอาแค่ pagebreak พอ
• theme_advanced_buttons2 บรรทัดนี้ต้องใส่ (แม้ว่าจะเป็น blank) เพื่อบอกว่าฉันจะเอาทูลบาร์บรรทัดเดียว
• content_css ตั้งพาธให้ตรง ในตัวอย่างนี้เป็น localhost/blognone จึงต้องอ้างพาธตามนี้ แต่ถ้าเป็นโดเมนจริงก็เริ่มที่ /sites พอ

สุดท้ายอาจจำเป็นต้องแก้ CSS เพื่อให้ข้อความในกล่อง TinyMCE นั้นแสดงผลเหมือนกับส่วนอื่นๆ ของเว็บ อันนี้ Firebug ช่วยได้

ป.ล. เพื่อการแสดงผลในหน้า create content ที่ดูเรียบง่ายสะอาดตา แนะนำ Vertical Tabs และ Better Formats (ตัวหลังจะงงเล็กน้อย หน้าตั้งค่าอยู่ใน permissions)

ผลลัพธ์ (ดูแล้วไม่ค่อยน่าเชื่อว่าเป็น Drupal + TinyMCE)