บทความ

Unnop
Tutorial 3 : การใช้งาน tinyMCE

by Unnop on Apr 16, 2019

ต่อจาก การเขียนแผนการศึกษาออนไลน์ ต่อด้วยส่วนขยายการใช้งาน คือ เทคนิคและวิธีการใช้งาน Rich text editor หรือ WYSIWYG (ย่อมาจาก What You See Is What You Get) ซึ่งก็ตามตัวพิมพ์อะไรลงไปก็ได้อย่างนั้น ซึ่งมีอยู่หลายค่ายด้วยกัน ในที่นี้เราเลือกใช้ tinyMCE ่ค่ายยอดนิยมอันดับสอง ผมเลือกใช้ตัวนี้ด้วยความที่ interface ไม่รก ดูเรียบง่ายกว่าอันดับหนึ่ง
วิธีการใช้งาน tinyMCE
 
1. การแทรกและแก้ไขรูป
  • กดที่ไอคอนรูปภาพ (Insert/edit image) หรือคลิกขวาเลือก Image เราสามารถแทรก url ได้โดยตรงหรือเลือกเอาจากไฟล์ส่วนตัวโดยกดที่ ไอคอนขวามือจะเปิดตัวจัดการไฟล์จะมีสองส่วน คือ Files สำหรับเก็บไฟล์รูปส่วนตัวของใครของมัน และ Shared Files ส่วนนี้จะสามารถเข้าถึงได้ทุกคน

  • การนำไฟล์ขึ้้นทำได้โดยวางเคอร์เซอร์ที่ไอคอน + ตรงขวาล่าง จะมีให้เลือกอัพโหลดไฟล์หรือสร้างโฟลเดอร์ใหม่ แนะนำว่าควรสร้างโฟลเดอร์ เพื่อความเป็นระเบียบเรียบร้อย เช่น Numthang_Footprint_2561 สำหรับไฟล์รูปในส่วนของร่องรอยการเรียนรู้ เสร็จแล้วก็เลือกรูปที่ต้องการแล้วก็คลิกและ OK

  • การแก้ไขรูปทำได้โดยคลิกที่รูปที่ต้องการก่อนแล้วเลือกไอคอนรูปอีกครั้ง แล้วทำเหมือนเดิม
2. การแทรกและแก้ไขตาราง
  • กดที่ไอคอนตาราง (Table) เลือกจำนวนเซลล์และคอลัมน์ที่ต้องการ ตอนแรกเลือกไปก่อนเท่าไรก็ได้สามารถเพิ่มเซลและคอลัมน์ได้ภายหลัง ตัวอย่างเช่น จะสร้างตาราง 3x3 เลือก 3x3

  • ถ้าลองกดเลือกตารางจะมีรายการแก้ไขตารางด้านล่าง เรียงลำดับดังนี้ คือ Table Properties, ลบตาราง, แทรกแถวบน, แทรกแถวล่าง, ลบแถว, ลบคอลัมน์ด้านหน้า, ลบคอลัมน์ด้านหลังและลบคอลัมน์

  • การรวมเซลล์หรือคอลัมน์ (Merge cells) ทำได้โดยลากส่วนที่ต้องการรวมแล้วคลิกขวา เลือก Cell -> Merge cells
3. การแทรกโควต - กรณีที่ต้องการเน้นคำพูดในส่วนที่น่าสนใจหรืออยากให้อ่าน ทำได้โดยไฮไลต์ส่วนที่ต้องการเน้นแล้วเลือก Blockquote กรณีที่ Blockquote แล้วบางครั้งมาทั้งหมดในส่วนที่เราไม่ต้องการด้วย ให้เลือก Edit -> Undo หรือกด Ctrl+Z แล้วเคาะส่วนที่ไม่ต้องการออก 1 ครั้ง แล้วโควตใหม่
 
4. การแทรกวิดีโอและเสียง - เลือกไอคอนรูปวิดีโอ (Insert/edit media) ลักษณะการทำงานจะคล้ายกับแทรกรูป แต่สามารถอัพโหลดไฟล์ที่เป็น mp3/mp4 หลังจากนั้นทำเหมือนกับการแทรกรูป
 
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)
 
หมายเหตุ : เฉพาะการวาง (Paste) สำหรับ browser บางตัวอาจไม่รองรับ จำเป็นต้องใช้ Short cut key แทน

Posted in ความเคลื่อนไหว

เนื้อหาที่เกี่ยวข้อง