Tutorial 6 : การใช้งาน tinyMCE
ติดต่อลงโฆษณา
Leaderboard in Content 1st
Fixed 1,000 baht/month
Slot 300 baht/month
ต่อจาก การเขียนแผนการศึกษาออนไลน์ ต่อด้วยส่วนขยายการใช้งาน คือ เทคนิคและวิธีการใช้งาน Rich text editor หรือ WYSIWYG (ย่อมาจาก What You See Is What You Get) ซึ่งก็ตามตัวพิมพ์อะไรลงไปก็ได้อย่างนั้น ซึ่งมีอยู่หลายค่ายด้วยกัน ในที่นี้เราเลือกใช้ tinyMCE ค่ายยอดนิยมอันดับสอง ผมเลือกใช้ตัวนี้ด้วยความที่ interface ไม่รก ดูเรียบง่ายกว่าอันดับหนึ่ง
วิธีการใช้งาน 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)
 
หมายเหตุ : เฉพาะการวาง (Paste) สำหรับ browser บางตัวอาจไม่รองรับ จำเป็นต้องใช้ Short cut key บนเครื่อง Desktop แทน

by Unnop on Apr 16, 2019

Posted in กิจกรรมและประกาศ

ติดต่อลงโฆษณา
Medium Rectangle Sidebar 1st
Fixed 1,000 baht/month
Slot 300 baht/month

ป้ายคำค้น

ในหมวดเดียวกัน
ป้ายคำค้นเดียวกัน

โปรเจ็กต์ของผู้แต่ง