การใช้งานเครื่องมือ JCE Editor
การทํางานของปุ่มเครื่องมือต่างๆ จะเหมือนกับการใช้งานเครื่องมือใน Microsoft word เวลาใช้งาน สามารถเอาเมาส์ ไปชี้ที่ Icon เครื่องมือนั้นๆ ดูได้ว่า Icon แต่ละตัวมีความหมายและใช้ทําอะไร
Name / Description Icon
New document
สร้างเอกสารใหม่ ซึ่งจะลบข้อมูลทั้งหมดที่เรากรอกไปแล้ว ออกทั้งหมด
Copy, Cut, Paste
สําเนาข้อความหรือรูปภาพ, ตัดข้อความหรือรูปภาพพร้อม สําเนาด้วย , วางข้อความหรือรูปภาพที่เราได้ copy มาก่อน นี้
Select text color
เลือกสี หรือ เปลี่ยนสีให้ตัวอักษร Bold (Ctrl+B) ทําตัวหนาให้ตัวอักษร Italic (Ctrl+I) ทําตัวเอียงให้ตัวอักษร Underline (Ctrl+U) ขีดเส้นใต้ให้ตัวอักษร Font family รูปแบบตัวอักษร Font size ขนาดตัวอักษร
Align full, Align center, Align left, Align right ใช้สําหรับจัดวางตําแหน่งวางตัวอักษร หรือ รูปภาพ Insert horizontal ruler
ขีดเส้น
Insert/Edit image : เพิ่มหรือแก้ไขรูปภาพ Insert/Edit link : เพิ่มหรือแก้ไข link Unlink : เอา link ออก
Redo
เครื่องมือเกี่ยวกับการจัดการตาราง
Insert a new table : สร้างตารางใหม่ Delete table : ลบตาราง
Remove column, Delete row ลบแถวแนวตั้ง, ลบแถวแนวนอน
Insert column after, Insert column before เพิ่มแถวในแนวตั้งหลังเคอร์เซอร์ และเพิ่มแถวในแนวตั้งก่อน เคอร์เซอร์
Insert row after, Insert row before เพิ่มแถวในแนวนอน
Merge table cells
รวมแถวในแนวนอน หรือในแนวตั้ง Split merged table cells แยกแถวในแนวตั้ง หรือแนวนอน
ก่อนที่จะใช้งานเครื่องมือนั้น ในบางครั้งต้องทําแถบดําคลุมพื้นที่ในส่วนที่จะใช้งานก่อนเช่น การ Merge แถวแนวตั้งหรือ แถวแนวนอน การเปลี่ยนสีตัวหนังสือ การทํา link การ copy ฯลฯ โดยเครื่องมือ ส่วนใหญ่จะมีการใช้งานเหมือนใน Microsoft Word
1. การใช้งานเครื่องมือสําหรับสร้างตาราง
คลิกบนพื้นที่ว่างๆ ให้มีเคอร์เซอร์ขึ้นก่อน แล้วคลิกที่เครื่องมือ Inserts a new table ดังรูปที่ 1.1 เพื่อทํา การสร้างตาราง
เมื่อทําคลิกที่เครื่องมือ Inserts a new table แล้ว จะแสดงหน้าต่างดังรูปที่ 1.2 เพื่อตั้งค่าให้กับ ตาราง เช่นความสูง ความกว้างของตาราง Cols หมายถึง กําหนดจํานวนแถวตามแนวตั้ง Rows หมายถึง การกําหนดจํานวนแถวตามแนวนอน Alignment หมายถึง การตั้งค่าตําแหน่งตาราง เช่นให้ชิดด้านซ้าย ด้านขวา หรือตรงการ Border หมายถึง กําหนดความหน้าของขอบตาราง เลข 0 หมายถึง ไม่ต้องการให้มีเส้นขอบ Width หมายถึง การกําหนดขนาดความกว้างของตาราง Height หมายถึง การกําหนดความสูงของตาราง เมื่อผู้ใช้งานกําหนดค่าต่างๆ เสร็จแล้ว ให้คลิกที่ปุ่ม Insert ดังรูปที่ 1.2 และจะได้ผลลัพธ์ ดังรูปที่ 1.3 รูปที่ 1.2 การกําหนดค่าให้กับตาราง รูปที่ 1.3 แสดงตารางที่สร้างขึ้น
2. การเพิ่มแถวตามแนวนอน หรือแถวตามแนวตั้ง
ให้คลิกในแถวหรือคอลัมน์ ที่จะทําการเพิ่ม แล้วคลิกที่ปุ่ม Insert row หรือ Insert columm ซึ่งจะมี อยู่ 2 แบบคือ เพิ่มก่อนหรือหลังบริเวณที่เคอร์เซอร์กระพริบอยู่ ดังรูปที่ 2.1 จะทําการเพิ่มแถว
แนวนอน หลังแถวที่มีเคอร์เซอร์วางอยู่ ซึ่งจะได้ผลลัพธ์ดังรูปที่ 2.2
รูปที่ 2.1 การเพิ่มแถวตามแนวนอน หรือตามแนวตั้ง
รูปที่ 2.2 ผลลัพธ์จากการเพิ่มแถวตามแนวนอน
3. การใช้เครื่องมือในการ Merge แถว
ให้ทําการแดรกเมาส์ คลุมพื้นที่ที่จะทําการ Merge (ลักษณะการทํางานเหมือนใน Microsoft word) แล้วคลิกที่ปุ่ม Merge table cells ดังรูปที่ 3.1 และจะได้ผลลัพธ์ ดังรูปที่ 3.2
รูปที่ 3.1 แสดงการทําแดรกเมาส์คลุมพื้นที่ที่ต้องการทําการ Merge
รูปที่ 3.2 ผลลัพธ์ เมื่อทําการ Merge แถวแนวนอน
ผลลัพธ์ที่ได้จากการ Merge แถว
4. การใช้เครื่องมือเพิ่มหรือแก้ไขรูปภาพ ให้คลิกตรงตําแหน่งที่ต้องการเพิ่มรูปภาพก่อน แล้วคลิกเลือกเครื่องมือ Insert/Edit image ดังรูปที่ 4.1 แล้วจะได้ผลลัพธ์ดังรูปที่ 4.2 แสดงเครื่องมือ Image Manager เพื่อจะเลือกตําแหน่งที่เก็บรูปภาพ หรือ ตําแหน่งที่จะนํารูปภาพจากเครื่องคอมพิวเตอร์ไปเก็บไว้ รูปที่ 4.1 การใช้งานเครื่องมือ Insert/Edit image รูปที่ 4.2 หน้าต่าง Image Manager จากรูปที่ 4.2 หน้าต่าง Image Manager นี้จะแสดงตําแหน่งที่เก็บรูปภาพ ซึ่งผู้ใช้งานสามารถเลือก รูปภาพที่เคย Upload มาไว้ในเครื่อง server แล้วขึ้นมาใช้งานได้ หรือ สามารถที่จะทําการ Upload รูปจาก เครื่องคอมพิวเตอร์ของเราเองไปไว้ในเครื่อง Server ที่ใช้เก็บเว็บไซต์ ก็ได้
แต่ในที่นี้จะอธิบายวิธีการ Upload รูปภาพจากเครื่องคอมพิวเตอร์ของเราขึ้นไปเก็บในเครื่อง Server ที่เก็บข้อมูลเว็บไซต์ก่อน แล้วจึงเรียกรูปดังกล่าว ขึ้นมาใช้งาน
รูปที่มีอยู่แล้วในเครื่อง Server ที่ เก็บเว็บไซต์
เมื่อแสดงหน้าต่างดังรูปที่ 4.2 แล้ว ให้คลิกเลือก Directory (Folder) ที่จะใช้เก็บภาพ ดังรูปที่ 4.3 จะเลือก เก็บรูปใน Directory ชื่อว่า ja โดยคลิกที่ engfood ---> ja รูปที่ 4.3 เลือกตําแหน่ง Directory ที่ต้องการใช้เก็บไฟล์รูปภาพ จากรูปที่ 4.3 เมื่อเลือก Directory ที่ต้องการเก็บรูปภาพ เสร็จแล้วให้คลิกที่ปุ่ม Upload หลังจากนั้นจะแสดง หน้าต่าง Upload ดังรูปที่ 4.4 รูปที่ 4.4 แสดงหน้าต่าง Upload เพื่อทําการเลือกภาพจากเครื่องคอมพิวเตอร์ของเรา 2.คลิกปุ่ม Upload 1.เลือก Directory ที่จะ เก็บไฟล์รูปภาพ
จากรูปที่ 4.4 ให้คลิกที่ ปุ่ม Add หลังจากนั้นจะแสดงหน้าต่างขึ้นมา เพื่อให้เราไปเลือกไฟล์รูปภาพ จากเครื่องคอมพิวเตอร์ของเราเอง ให้ทําการเลือกรูปภาพที่เราจะนํามาใช้งาน แล้วคลิกปุ่ม Open ดังรูปที่ 4.5 รูปที่ 4.5 แสดงหน้าต่างเพื่อสําหรับเลือกรูปภาพจากเครื่องคอมพิวเตอร์ของเราเอง จากรูปที่ 4.5 เมื่อคลิกที่ปุ่ม Open แล้วจะกลับมายังหน้าต่าง Upload ซึ่งจะเห็นว่ามีไฟล์ภาพที่เรา เลือกแนบติดมาด้วย และจะเห็นกากบาทสีแดง ซึ่งหมายถึงยังไม่ได้มีการ Upload รูปภาพขึ้นไปเก็บใน Directory ที่เลือกไว้ ดังนั้นให้คลิกที่ปุ่ม Upload ดังรูปที่ 4.6 จะทําให้ได้ผลลัพธ์ดังรูปที่ 4.7 โดยที่กากบาทสี แดงจะเปลี่ยนเป็นสีเขียว แสดงว่าได้มีการอัพโหลดรูปขึ้นไปเก็บใน Directory แล้ว หลังจากนั้นให้ทําการปิด หน้าต่างโดยคลิกที่ปุ่ม Close หรือ กากบาทด้านมุมขวาของหน้าต่าง รูปที่ 4.6 ผลลัพธ์เมื่อทําการเลือกจากเครื่องคอมพิวเตอร์ของเราเอง คลิกเพื่ออัพโหลดรูปที่เลือกขึ้นเก็บ ใน Directory ที่เลือกไว้ สถานะเป็นสีแดง
รูปที่ 4.7 เมื่อคลิกปุ่ม Upload แล้ว จากรูปที่ 4.7 เมื่อทําการคลิกที่ปุ่ม Upload แล้ว รูปที่ได้เลือกไว้จะเก็บไปใน Directory ที่เลือกไว้ ก่อนนี้ และสถานะของปุ่มสีแดงจะเปลี่ยนเป็นสีเขียว ถ้าต้องการเลือกรูปภาพจากเครื่องคอมพิวเตอร์ของเราอีก ก็ให้ทําเช่นเดิมโดยคลิกที่ปุ่ม Add และ เลือกรูปภาพ แต่เมื่อไม่ต้องการทําขั้นตอนนี้แล้วให้คลิกที่ปุ่ม Close ซึ่งจะทําให้หน้าต่าง Upload นั้นถูกปิด ไป และได้ผลดังรูปที่ 4.8 จะเห็นว่ามีรูปที่ถูกอัพโหลดมาเก็บไว้ใน Directory ที่เราเลือกไว้แล้ว รูปที่ 4.8 แสดงให้เห็นไฟล์ภาพที่ได้ Upload มาเก็บใน Directory ที่เลือกไว้ สถานะเปลี่ยนเป็นสีเขียว 1. เลือกรูป 2. คลิกปุ่ม Insert
จากรูปที่ 4.8 ให้คลิกที่ชื่อไฟล์ภาพ เพื่อจะนําภาพนี้ไปประกอบหน้าเว็บของเรา หลังจากนั้นให้คลิกที่ ปุ่ม Insert จะได้ผลลัพธ์ดังรูปที่ 4.9 รูปที่ 4.9 แสดงไฟล์ภาพที่ได้เลือกมาวาง หมายเหตุ การใช้เครื่องมือ Editor JCE สามารถหาข้อมูลเพิ่มเติมได้ที่ http://www.joomlacontenteditor.net/support/documentation/56-editor/343-editor-toolbar และ http://www.joomlacontenteditor.net/support/documentation/56-editor/340-editor-buttons