Tutorial 6 : การใช้งาน tinyMCE

โปรดติดต่อลงโฆษณา
เพื่อร่วมสนับสนุนแพลตฟอร์มฟรีของเราต่อไป
Top Leaderboard
Fixed 1,900 baht/month
Slot 550 baht/month

Tutorial 6 : การใช้งาน tinyMCE

ต่อจาก การเขียนแผนการศึกษาออนไลน์ ต่อด้วยส่วนขยายการใช้งาน คือ เทคนิคและวิธีการใช้งาน Rich text editor หรือ WYSIWYG (ย่อมาจาก What You See Is What You Get) ซึ่งก็ตามตัวพิมพ์อะไรลงไปก็ได้อย่างนั้น ซึ่งมีอยู่หลายค่ายด้วยกัน ในที่นี้เราเลือกใช้ tinyMCE ค่ายยอดนิยมอันดับสอง ผมเลือกใช้ตัวนี้ด้วยความที่ interface ไม่รก ดูเรียบง่ายกว่าอันดับหนึ่ง
Unnop Sricharoenchai ใน https://homeschoolnetwork.org/blog/tutorial-6

วิธีการใช้งาน tinyMCE

1. การแทรกและแก้ไขรูป

การแทรกรูป กดที่ไอคอนรูปภาพ (Insert/edit image) หรือคลิกขวาเลือก Image -> คลิกไอคอนขวามือข้างกล่อง Source จะเปิดตัวจัดการไฟล์ ภายในจะมีสองส่วน คือ Files สำหรับเก็บไฟล์รูปส่วนตัวของตัวเอง และ Shared Files ส่วนนี้จะสามารถเข้าถึงได้ทุกคน
การนำไฟล์ขึ้น ทำได้โดยวางเคอร์เซอร์ที่ไอคอนรูป [+] ตรงขวาล่าง -> เลือกอัพโหลดไฟล์หรือสร้างโฟลเดอร์ใหม่ -> คลิกไปที่รูปที่ต้องการจะใช้
แนะนำว่าควรสร้างโฟลเดอร์ เพื่อความเป็นระเบียบเรียบร้อย เช่น Numthang_2561 สำหรับไฟล์รูปร่องรอยการเรียนรู้ของนำทาง ปีการศึกษา 2561 เป็นต้น เพราะว่าถ้าสร้างไปแล้วหากต้องการจะย้ายที่อยู่รูป จะทำไม่ได้ต้องอัพโหลดใหม่ทั้งหมด
การแก้ไขรูป ทำได้โดยคลิกไปที่รูปที่ต้องการจะแก้ไข แล้วทำเหมือนการแทรกรูป

2. การแทรกและแก้ไขตาราง

กดที่ไอคอนตาราง (Table) เลือกจำนวนเซลล์และคอลัมน์ที่ต้องการ ตอนแรกเลือกไปก่อนเท่าไรก็ได้สามารถเพิ่มเซลและคอลัมน์ได้ภายหลัง ตัวอย่างเช่น จะสร้างตาราง 3x3 เลือก 3x3
ถ้าลองกดเลือกตารางจะมีรายการแก้ไขตารางด้านล่าง เรียงลำดับดังนี้ คือ Table Properties, ลบตาราง, แทรกแถวบน, แทรกแถวล่าง, ลบแถว, ลบคอลัมน์ด้านหน้า, ลบคอลัมน์ด้านหลังและลบคอลัมน์
การรวมเซลล์หรือคอลัมน์ (Merge cells) ทำได้โดยลากส่วนที่ต้องการรวมแล้วคลิกขวา เลือก Cell -> Merge cells

3. การแทรกโควต - กรณีที่ต้องการเน้นคำพูดในส่วนที่น่าสนใจหรืออยากให้อ่าน ทำได้โดยไฮไลต์ส่วนที่ต้องการเน้นแล้วเลือก Blockquote กรณีที่ Blockquote แล้วบางครั้งมาทั้งหมดในส่วนที่เราไม่ต้องการด้วย ให้เลือก Edit -> Undo หรือกด Ctrl+Z แล้วเคาะส่วนที่ไม่ต้องการออก 1 ครั้ง แล้วโควตใหม่

4. การแทรกวิดีโอและเสียง - เลือกไอคอนรูปวิดีโอ (Insert/edit media) ทำได้สองวิธี

วิธีที่ 1 คัดลอก URL จาก YouTube วางลงบน Source แล้วกด OK
วิธีที่ 2 ลักษณะการทำงานจะคล้ายกับแทรกรูป แต่สามารถอัพโหลดไฟล์ที่เป็น mp3/mp4 ได้ แล้วกด OK

5. การแทรกลิงค์ - ทำไฮไลต์ส่วนที่ต้องการแล้วเลือกไอคอนรูปโซ่หรือคลิกขวาเลือก Link สามารถใส่ URL ได้โดยตรงหรือกดไอคอนด้านขวาเลือกไฟล์ที่ต้องการลิงค์ไปถึง

6. การเคลียร์ฟอร์แมต - กรณีที่ต้องการยกเลิกฟอร์แมต HTML ให้ไฮไลต์ส่วนที่ต้องการแล้วกดไอคอนรูป Tx (Clear formatting)

7. การวางข้อความแบบไม่มีฟอร์แมต HTML - ใช้ในกรณีที่เราคัดลอกข้อความมาจากโปรแกรมอื่นแล้วติดฟอร์แมต HTML มาด้วย ซึ่งอาจทำให้การแสดงผลผิดเพี้ยนไปจากที่ต้องการ แนะนำให้เลือก Paste as text หรือคลิกขวาเลือก Paste as text ก่อน หลังจากนั้นจึงค่อยวางข้อความที่คัดลอกมา

8. การย่อหน้า Indent/Outdent

สำหรับย่อหน้า (Indent) - ไฮไลต์ส่วนที่ต้องการแล้วกด Tab หรือเลือกไอคอนย่อหน้า (Increase Indent)
สำหรับย่อหลัง (Outdent) - ไฮไลต์ส่วนที่ต้องการแล้วกด Shift+Tab หรือเลือกไอคอนย่อหลัง (Decrease Indent)
กรณีที่ Indent แล้วบางครั้งมาทั้งหมดในส่วนที่เราไม่ได้ไฮไลต์ด้วย ให้เลือก Edit -> Undo หรือกด Ctrl+Z แล้วเคาะส่วนที่ไม่ต้องการออก 1 ครั้ง แล้ว Indent ใหม่

9. การแทรก Bullet/Numbered

ทำเหมือนกับการทำ Indent แต่ให้เลือกไอคอนรูป Bullet list
ส่วนรายการตัวเลขให้เลือกไอคอน Numbered list
กรณีออกจาก Bullet list หรือ Numbered list ให้เคาะ Enter จากรายการสุดท้ายสองครั้ง

10. การดู source code - กรณีที่ไม่สามารถแก้ไขได้ด้วยวิธีการปกติ สามารถเลือกดู code HTML และแก้ไขโดยตรงได้ สำหรับผู้ที่เข้าใจ HTML

11. Short cut key ที่ควรรู้ - การทำตัวหนา (Ctrl+B), การคัดลอก (Ctrl+C), การตัด (Ctrl+X), การวาง (Ctrl+V)