ในบทเรียนนี้ จะนำเสนอ 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. กดปุ่ม
2. HTMLArea3 XTD
HTMLArea3 XTD เป็น editor ตัวหนึ่งที่ความนิยมและมีความง่ายในการใช้งาน ซึ่ง
ความสามารถมาก และใช้งานได้อย่างสะดวกสบาย
การติดตั้ง HTMLArea3 XTD จะเหมือนกับ การตัดตั้ง editor ทั่วไป คือ การ install mambots
สมาถทำได้โดย ไปที่ menubar (Installers--> mambots)
จะปรากฏหน้านี้
ให้คลิกที่ Browse จะปรากฏหน้าจอ ดังนี้
เมื่อทำการคลิก Browse จะขึ้นหน้าต่างให้เราไปที่ Folder ที่เก็บ File
HTMLArea3XTDv11RC1.zip แล้วให้คลิกที่ file กด Open
Click ที่ Upload File & Install เพื่อติดตั้ง HTMLArea3XTD หากการติดตั้งไม่มีข้อผิดพลาดใดๆ
จะปรากฏหน้านี้
Click ที่ปุ่ม Continue เพื่อเป็นการสิ้นสุดการติดตั้ง
หลังจากนั้น เพื่อการใช้งาน HTMLArea3XTD เป็น editor ของ Joomla จะต้องมีการตั้งค่า โดยทำ
ได้ดังนี้ โดยไปที่ menuber (site--> Global Configuration) แล้วเลือกไปที่ site
เมื่อไปยังหน้าการตั้งค่า site แล้ว ให้คลิกที่ Default WYSIWYG Editor: ให้เลือก HTMLArea3
XTD แล้วกด Save ที่ toolber
เมื่อมีการจัดการเนื้อหา ก็จะปรากฏ editor : HTMLArea3 XTD ให้ใช้
เมื่อเข้าสู่ส่วน template manager จะปรากฏส่วนแสดงรายละเอียดดังรูป
ในคอลัมน์ของ
- template manager -
- ส่วนการติดตั้ง template -
เพื่อเลือกไฟล์ template
เมื่อเข้าสู่ส่วน template manager จะปรากฏส่วนแสดงรายละเอียดดังรูป
- template manager –
(จะไม่สามารถลบ template ออกได้ หาก template นั้นถูกเลือกใช้อยู่)
(จะไม่สามารถลบ template ออกได้ หาก template นั้นถูกเลือกใช้อยู่)
