Joomla: การติดตั้ง WYSIWYG Editor

ในบทเรียนนี้ จะนำเสนอ WYSIWYG Editor 2 อย่าง คือ TinyMCE และ HTML Area3 XTD

1. TinyMCE

การใช้งาน TinyMCE สำหรับใส่และแก้ไขข้อมูล Content Item การใส่และแก้ไขข้อมูลลง

ใน Content จะมีลักษณะคล้าย ๆ กับโปรแกรมออกแบบเว็บไซต์ทั่วไป เช่น Macromedia
Dreaweaver โดยจะมีกรอบที่สามารถใส่ข้อมูลสองส่วนคือ

ส่วนแรก Intro Text เป็นส่วนที่ Content Item จำเป็นต้องมี อาจจะใส่ข้อมูลทั้งหมดหรือ

ข้อความบางส่วนที่เกริ่นถึงเนื้อหาใน Content Item ทั้งหมด

ส่วนที่สอง Main Text เป็นส่วนที่แสดงเนื้อหาที่เหลือต่อจาก Intro Text ทั้งหมด

ความหมายของปุ่มคำสั่งบน Toolbar

การจัดการตาราง (Table)
การแทรกตาราง
1. ให้กดปุ่ม

ที่ Toolbar ของ TinyMCE Editor

2. กำหนดค่าต่าง ๆ ดังนี้
Columns จำนวนของแถวในแนวตั้ง
Rows จำนวนของแถวในแนวนอน
Cellpadding ระยะห่างระหว่างช่อง Cell กับตัวอักษรภายในช่อง
Cell Cellspacing ระยะห่างระหว่างช่อง Cell
Alignment กำหนดให้ตารางชิดซ้าย ขวาหรือกึ่งกลาง
Width, Height กำหนดความกว้างและความสูงหน่วยเป็น pixels
(สามารถเปลี่ยนหน่วยเป็น % ได้ โดย เติม % ต่อท้ายค่าที่กำหนด) จากนั้น

ให้กดปุ่ม เพื่อแทรกตาราง
3. กดปุ่ม

เพื่อแทรกตาราง

การแทรกและลบ Row หรือ Column

1. คลิกช่อง Cell
2. เลือกกดปุ่มคำสั่งบน Toolbar ดังนี้

การรวม ช่อง Cell
1. คลิกช่อง Cell จากนั้นกดปุ่ม

จะปรากฏส่วนกำหนดค่าต่าง ๆ ดังรูป

2. กำหนดค่าการรวมช่อง Cell ในส่วน Merge table cells

การรวมช่อง Cell จะรวมโดยยึดตำแหน่งจากช่อง Cell ที่เลือกไว้ไปด้านซ้ายในกรณี

Column และด้านล่างในกรณี Row)
3. กดปุ่ม Update (การรวมจะเริ่มรวมจากทางขวาและด้านล่าง ของช่อง Cell ที่คลิกเลือกไว้)

การแยก ช่อง Cell
1. คลิกช่อง cell ที่ได้ถูกรวมไว้ จากนั้นกดปุ่ม

การจัดการรูปภาพและ MOSImage
สามารถเลือกใช้ Tools ในการจัดการรูปภาพได้แก่
• ปุ่ม Images บน Toolbar
• MOSImage

ปุ่ม images บน toolbar
การแทรกรูปภาพ
1. กดปุ่ม

ที่ TinyMCE Editor จะปรากฏส่วนกำหนดค่าต่าง ๆ ดังรูป

2. ระบุ Image URL เช่น http://esanenvi.com/~nitit.j/images/stories/clock.jpg
3. กำหนด Image description (คำอธิบายรูปภาพ)
4. แล้วกดปุ่ม

การปรับขนาดของรูปภาพ มี 2 วิธี
วิธีแรก
1. คลิกที่รูปภาพจะปรากฏจุดสี่เหลี่ยมเล็ก ๆ ตามขอบรูปภาพ

2. ใช้เม้าส์คลิกค้างไว้แล้วลากออกหรือเข้า เพื่อปรับขนาดของรูปภาพ
วิธีที่สอง
1. คลิกที่รูปภาพ แล้วกดปุ่ม

ที่ TinyMCE Editor

2. คลิก Tab Appearance แล้วกำหนดขนาดของรูปในช่อง Dimensions (กว้าง x ยาว) มีหน่วยเป็น
pixels (หากไม่ระบุความกว้าง x ยาว รูปจะแสดงตามขนาดของไฟล์รูป)

นอกจากนี้ยังสามารถปรับข้อความให้ล้อมรอบรูปภาพในลักษณะต่าง ๆ ได้โดยเลือกที่ส่วนของ

Alignment เมื่อปรับค่าต่าง ๆ เป็นที่เรียบร้อยแล้วให้กดปุ่ม

เพื่อบันทึก

MOSImage
การแทรกรูปภาพ
1. คลิกเม้าส์เพื่อเลือกตำแหน่งที่จะวางรูปภาพภายในกรอบ
2. กดปุ่ม

จากนั้นปรากฏข้อความ { mosimage } ภายในกรอบ

3. คลิกที่ Tab Images เพื่อเปิดส่วนการใช้งาน MOSImage บน Panel ทางด้านขวา

4. คลิกเลือกไฟล์รูปภาพในกรอบ Gallery Images
5. กดปุ่ม

จากนั้นจะปรากฏชื่อไฟล์ที่เลือกมาในกรอบ Content Images
หากต้องการยกเลิกไฟล์ที่เลือกมา ให้คลิกไฟล์รูปภาพในกรอบ Content Images และกดปุ่ม

6. กดปุ่ม

mosimage จะแสดงจำนวนรูปภาพตามจำนวนที่แทรกรูปด้วยคำสั่ง

รูปภาพที่ถูก

แสดงจะถูกนำมาจาก Content Images

หากต้องการเปลี่ยนลำดับภายใน content image สามารถทำได้โดยการกดปุ่ม

และ

การปรับค่าต่าง ๆ ของรูปภาพ
1. คลิกชื่อไฟล์ที่ต้องการปรับค่าในกรอบ content images
2. กำหนดค่าต่าง ๆ ได้แก่
Image Align การจัดวางรูปภาพ (ชิดซ้าย, ชิดขวา, กึ่งกลาง)
Alt Text ข้อความที่จะปรากฏเมื่อนำเม้าส์มาวางบนรูปภาพ
border ขนาดของกรอบรูปภาพ
3. กดปุ่ม