ReadyPlanet.com
dot

dot
เลือกเวอร์ชั่น Text Editor
Editor Manual
แนะนำวิธีทำเว็บไซต์เบื้องต้น
Function Update
dot
dot
เว็บไซต์รูปแบบ Responsive web design
จัดการเมนูหลัก
เมนูโค้ดและสคริปต์ภายใต้ <head>
ประวัติการใช้งานระบบ
ตัวนับผู้ชมเว็บ
Google Service/Sitemap
จัดการอีเมลสมัครรับข่าวสาร
dot
dot
ระบบผู้ช่วย
ระบบ Chat
dot
dot
การตั้งอีเมล Pop Mail
dot
dot
bulletจัดการเว็บไซต์
bulletระบบพื้นฐาน
bulletระบบเสริม
bulletบริการสมาชิก
bulletเทคนิคอื่นๆ
bulletText Editor
dot
dot
bulletจัดการแบบฟอร์มติดต่อกลับ


วิธีการใช้งานเครื่องมือ Text Editor (FCKeditor)


เครื่องมือ Text Editor (FCKeditor) เป็นเครื่องมือสำหรับใส่ข้อมูล แก้ไข  ตกแต่งเว็บไซต์ในระบบสำเร็จรูป ReadyPlanet เช่น ข้อมูลที่เป็นตัวอักษร  รูปภาพ  และโค้ด HTML เป็นต้น โดยเปิดให้ใช้ในเว็บไซต์ระบบ VelaClassic ที่เปิดใช้งานก่อนเดือนมีนาคม 2559 ค่ะ*

โดยเครื่องมือ Text Editor จะแสดงผลในหน้าแก้ไขเว็บไซต์หลายส่วน  เช่น เมนูหลักด้านบนและเมนูย่อยด้านข้าง ชนิดสร้างหน้าใหม่ (P) , หน้ารวมกลุ่มบทความ , บทความ, รายละเอียดทั้งหมดของสินค้าในระบบร้านค้าออนไลน์ VelaCommerce , หน้ากระทู้เว็บบอร์ด เป็นต้น

 

ตัวอย่างการแสดงผลเครื่องมือ Text Editor (FCKeditor)  ในระบบเว็บไซต์สำเร็จรูป ReadyPlanet

 
 


 วีดีโอแนะนำเครื่องมือใส่รูปภาพ Upload Image และ Easy Upload Image

 วีดีโอแนะนำเครื่องมือสำหรับตกแต่งแก้ไขตัวอักษร ตอนที่ 1

 วีดีโอแนะนำเครื่องมือสำหรับตกแต่งแก้ไขตัวอักษร ตอนที่ 2

 วีดีโอแนะนำเครื่องมือสำหรับสร้างและลบลิงค์

 

รายละเอียดวิธีการใช้งานเครื่องมือ Text Editor (FCKeditor) 


 
Font (ตัวอักษร)
 

สามารถคลิกเมาส์ไฮไลท์ข้อความที่ต้องการ แล้วกดเลือกรูปแบบอักษรจากเครื่องมือ Font โดยมีรูปแบบมาตรฐานให้เลือก ได้แก่ Arial, Comic Sans Ms , Courier New , Tahoma , Times New Roman , Verdana



 
Size (ขนาดตัวอักษร)

ใช้สำหรับกำหนดขนาดตัวอักษรในเนื้อหาของบทความ สามารถเปลี่ยนขนาดอักษรได้โดย คลิกเมาส์ไฮไลท์ข้อความที่ต้องการ และคลิกเครื่องมือ "Size" เพื่อเปลี่ยนขนาดอักษร

(หากไม่เปลี่ยนขนาดอักษรด้วยเครื่องมือ Size ตัวอักษรจะมีขนาดตามที่กำหนดไว้ในที่ "จัดการสีส่วนแสดงบทความ" หัวข้อ "สีของตัวอักษรทั่วไป")



  
Preview (ดูหน้าเอกสารตัวอย่าง)
 

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



 Source (ดูรหัส HTML)

ใช้สำหรับดูรหัส Code HTML  หากเครื่องมือ Source ทำงาน ข้อมูลในช่องรายละเอียดจะถูกแปลงเป็น HTML Code  และพร้อมรับข้อมูลที่เป็น Code ต่าง ๆ ซึ่งท่านสามารถนำมาตกแต่งเว็บไซต์เพิ่มเติมได้  เช่น โค้ด Facebook Page Pluging, โค้ดวีดีโอ, โค้ดสไลด์, โค้ดเครื่องเล่นเพลง mp3 เป็นต้น



 
Bold (ตัวหนา)

ใช้ในการทำให้ตัวอักษรเป็นตัวหนา โดยการลากเมาส์ไฮไลท์คลุมตัวอักษรที่ต้องการให้เป็นตัวหนา แล้วคลิกที่เครื่องมือ Bold



 
Italic (ตัวเอียง) 

ใช้ในการทำให้ตัวอักษรเป็นตัวเอียง โดยการลากเม้าส์ไฮไลท์คลุมตัวอักษรที่ต้องการให้เป็นตัวเอียง แล้วคลิกที่เครื่องมือ Italic



 Underline (ตัวขีดเส้นใต้)

ใช้ในการขีดเส้นใต้ที่ข้อความ  โดยการลากเม้าส์ไฮไลท์คลุมตัวอักษรที่ต้องการขีดเส้นใต้ แล้วคลิกที่เครื่องมือ Underline



 
Strike Through (ตัวขีดเส้นทับ)

ใช้ในการขีดเส้นทับกลางตัวอักษรหรือข้อความ โดยการลากเม้าส์ไฮไลท์คลุมตัวอักษรที่ต้องการขีดเส้นทับ  แล้วคลิกที่เครื่องมือ Strikethrough



 
Subscript (ตัวห้อย)

ใช้สำหรับการทำตัวอักษรห้อย โดยการลากเม้าส์ไฮไลท์คลุมตัวอักษรที่ต้องการให้เป็นตัวอักษรห้อย แล้วคลิกที่เครื่องมือ Subscript



 
Superscript (ตัวยก)

ใช้สำหรับการทำตัวอักษรยก โดยการลากเม้าส์ไฮไลท์คลุมตัวอักษรที่ต้องการให้เป็นตัวยก  แล้วคลิกที่เครื่องมือ Superscript



 
Font Color (สีตัวอักษร)

ใช้สำหรับการเปลี่ยนสีตัวอักษร  โดยการลากเม้าส์ไฮไลท์คลุมตัวอักษรที่ต้องการ แล้วคลิกที่เครื่องมือ Font Color จะมีตารางสีให้คลิกเลือกสีที่ท่านต้องการ (สามารถคลิก "More Colors" เพื่อเลือกสีเพิ่มเติมได้)



 
Background Color (สีพื้นหลัง)
 

ใช้สำหรับเติมสีพื้นหลังให้ข้อความหรืออักษร โดยการลากเม้าส์ไฮไลท์คลุมตัวอักษรที่ต้องการ แล้วคลิกที่เครื่องมือ Background Color  จะมีตารางสีขึ้นมาให้คลิกเลือกสีที่ท่านต้องการ (สามารถคลิก "More Colors"เพื่อเลือกสีเพิ่มเติมได้)



 
Remove Format  (ล้างรูปแบบ) 

ใช้สำหรับล้างรูปแบบพิเศษต่าง ๆ ของตัวอักษร เช่น ยกเลิกการทำตัวหนา ตัวเอียง  ลบสีอักษร  ลบสีพื้นหลัง เป็นต้น ให้แสดงผลเป็นตัวอักษรแบบธรรมดาที่ยังไม่ได้รับการตกแต่งใด ๆ โดยการลากเม้าส์ไฮไลท์คลุมตัวอักษรที่ต้องการ แล้วคลิกที่เครื่องมือ Remove Format



 Left Justify (จัดชิดซ้าย)

ใช้ในการจัดรูปแบบตัวอักษรหรือรูปภาพให้ชิดซ้าย  โดยการลากเม้าส์ไฮไลท์คลุมตัวอักษรที่ต้องการ หรือคลิกที่รูปภาพ แล้วคลิกที่เครื่องมือ  Left Justify



 Center Justify (จัดกึ่งกลาง) 

ใช้ในการจัดรูปแบบตัวอักษรหรือรูปภาพให้อยู่กึ่งกลาง โดยการลากเม้าส์ไฮไลท์คลุมตัวอักษรที่ต้องการ หรือคลิกที่รูปภาพ แล้วคลิกที่เครื่องมือ Center Justify



 
Right Justify  (จัดชิดขวา)

ใช้ในการจัดรูปแบบตัวอักษรหรือรูปภาพให้ชิดขวา โดยการลากเม้าส์ไฮไลท์คลุมตัวอักษรที่ต้องการ หรือคลิกที่รูปภาพ แล้วคลิกที่เครื่องมือ  Right Justify



 
Block Justify (จัดพอดีหน้ากระดาษ)

ใช้ในการจัดรูปแบบตัวอักษรให้เต็มหน้า Page ซึ่งตัวอักษรจะแสดงผลเท่ากันทั้งขอบด้านซ้ายและขวาทุกบรรทัด โดยการลากเม้าส์ไฮไลท์คลุมตัวอักษรที่ต้องการ แล้วคลิกที่เครื่องมือ Block Justify



 
Insert/Remove Numbered List  (แทรก/ลบ ลำดับรายการแบบตัวเลข)
 

ใช้ในการจัดลำดับหัวข้อด้วยตัวเลข โดยคลิกเมาส์ที่ตำแหน่งที่ต้องการในส่วนเนื้อหา จากนั้นคลิกเครื่องมือ Insert/Remove Numbered List  ระบบจะแทรกตัวเลขลำดับให้อัตโนมัติ และคุณสามารถพิมพ์ข้อความต่อท้ายเลขลำดับดังกล่าวได้ตามต้องการ  และเมื่อกด Enter เพื่อขึ้นบรรทัดใหม่ ระบบจะแสดงผลตัวเลขลำดับถัดไปให้อัตโนมัติเช่นกันค่ะ

แต่หากไม่ต้องการแสดงผลเลขลำดับถัดไปหลังจากกด Enter ให้คลิกเครื่องมือ Insert/Remove Numbered List  อีกครั้ง จะเป็นการยกเลิกการแสดงผลเลขลำดับค่ะ



 Insert/Remove Bulleted List (แทรก/แก้ไข ลำดับรายการแบบสัญลักษณ์)
 

ใช้ในการจัดลำดับหัวข้อด้วยสัญลักษณ์จุด ( • )  โดยคลิกเมาส์ที่ตำแหน่งที่ต้องการในส่วนเนื้อหา จากนั้นคลิกเครื่องมือ Insert/Remove Bulleted List  ระบบจะแทรกสัญลักษณ์จุดให้อัตโนมัติ คุณสามารถพิมพ์ข้อความต่อท้ายสัญลักษณ์ดังกล่าวได้ตามต้องการ  และเมื่อกด Enter เพื่อขึ้นบรรทัดใหม่ ระบบจะแสดงผลสัญลักษณ์จุดเป็นหัวข้อถัดไปให้อัตโนมัติเช่นกันค่ะ

แต่หากไม่ต้องการแสดงผลสัญลักษณ์จุดถัดไปหลังจากกด Enter ให้คลิกเครื่องมือ Insert/Remove Bulleted List  อีกครั้ง จะเป็นการยกเลิกการแสดงผลสัญลักษณ์จุดค่ะ



 
Decrease Indent  (ลดระยะย่อหน้า)

ใช้ในการเลื่อนข้อความไปข้างหน้า (ทางซ้าย) เพื่อลดระยะย่อหน้า  โดยคลิกเมาส์ที่ตำแหน่งหน้าข้อความที่ต้องการเลื่อน หลังจากนั้นคลิกที่เครื่องมือ Decrease Indent ดังรูปภาพ



 
Increase Indent (เพิ่มระยะย่อหน้า)
 

ใช้ในการเลื่อนข้อความไปข้างหลัง (ทางขวา) เพื่อเพิ่มระยะย่อหน้า โดยคลิกเมาส์ที่ตำแหน่งหน้าข้อความที่ต้องการเลื่อน หลังจากนั้นคลิกที่เครื่องมือ Increase Indent  ดังรูปภาพ



 Insert Horizontal Line (แทรกเส้นคั่นบรรทัด)

ใช้ในการเพิ่มเส้นคั่นระหว่างเนื้อหาบทความ โดยคลิกวางเคอร์เซอร์ไว้ระหว่างบรรทัดที่ต้องการกำหนดเส้นคั่น หลังจากนั้นคลิกที่เครื่องมือ Insert  Horizontal Line จะปรากฎเส้นคั่น ดังรูปภาพ



 Insert Special Characters (แทรกตัวอักษรพิเศษ)

ใช้สำหรับใส่สัญลักษณ์พิเศษต่าง ๆ โดยคลิกวางเคอร์เซอร์เม้าส์ที่ตำแหน่งที่ต้องการใส่สัญลักษณ์พิเศษ หลังจากนั้นคลิกที่เครื่องมือ Insert Special Characters  เพื่อเลือกสัญลักษณ์  ดังรูปภาพ



 
Insert Marquee

ใช้ในการสร้างตัวอักษรวิ่ง โดยคลิกที่เครื่องมือ Insert Marquee และกำหนดการตั้งค่าดังนี้ 

  1. Direction = ทิศทางการเลื่อนซ้าย ขวา
  2. Behavior = การแสดงผลมีให้เลือกแบบวนต่อเนื่อง สไลด์แล้วหยุด หรือวิ่งสลับซ้ายขวาไปมา
  3. Marquree = พิมพ์ข้อความที่ต้องการให้เป็นอักษรเคลื่อนไหว
  4. Bgcolor = สีพื้นหลังในกรอบ Marquee
  5. Width = ความกว้างกรอบ Marquee
  6. Height = ความสูงกรอบ Marquee
  7. Scroll Amount = ความเร็ว หน่วยเป็น pixels ต่อวินาที
  8. Scroll Delay = ความหน่วง หน่วยเป็น pixels ต่อวินาที
  9. ปุ่ม OK บันทึกการใส่ Marquree


 

ตัวอย่างการแสดงผลตัวอักษรเคลื่อนไหวแบบ Marquee

ReadyPlanet.com ผู้นำด้านการตลาดดิจิทัลแบบเน้นผลลัพธ์   



 
Hyperlink in text (แทรก/แก้ไข ลิงก์)

ช้ในการผูกลิงก์เชื่อมโยงจากข้อความหรือรูปภาพไปยังหน้าเว็บไซต์ปลายทางที่ต้องการ  โดยเบื้องต้นให้คุณคัดลอก URL ของหน้าเว็บไซต์ปลายทางที่ต้องการจะลิงค์ไปถึง  จากนั้นดำเนินการผูกลิงก์ ตามขั้นตอนดังนี้

  • การผูกลิงก์ข้อความ : พิมพ์ข้อความที่ต้องการสร้างเป็นลิงก์เมนูลงในช่องเนื้อหาของบทความ จากนั้น คลิกเมาส์ไฮไลท์ข้อความที่ต้องการ และคลิกเครื่องมือ  "Hyperlink in Text"



 

  • การผูกลิงก์รูปภาพ : อัพโหลดรูปภาพเข้ามาในส่วนเนื้อหาของบทความด้วยเครื่องมือ Upload Image หรือ Easy Upload Image จากนั้น คลิกที่รูปภาพ และคลิกเครื่องมือ   "Hyperlink in Text" 


 

หลังจากคลิกเครื่องมือ Hyperlink in Text จะปรากฎหน้าต่าง "Link" ให้พิมพ์หรือวาง URL ของหน้าเว็บไซต์ปลายทางที่ต้องการลิงก์ไปถึงในช่อง "URL" และกด OK 


 

ในกรณีที่เป็นการลิงก์ไปยังเว็บไซต์อื่นภายนอก  ให้เลือก "Target" เป็น "New Window (_blank)" (เพื่อให้เกิดการเปิดหน้าต่างใหม่เมื่อคลิกลิงก์) และคลิก OK


 

ตัวอย่างการแสดงผลลิงก์ข้อความและรูปภาพจากเครื่องมือ Hyperlink in Text

เว็บไซต์สำเร็จรูป ReadyPlanet.com



 
Remove Link (ลบลิงก์)

ใช้ในการลบลิงก์ออกจากข้อความหรือรูปภาพ  โดยการคลิกเม้าส์ไฮไลท์คลุมตัวอักษร หรือคลิกที่รูปภาพที่ผูกลิงก์ไว้  แล้วคลิกที่เครื่องมือ Remove Link 



 
Insert/Edit Anchor (แทรก/แก้ไข Anchor)

เครื่องมือ Anchor ใช้สำหรับสร้างลิงก์ในหน้าเดียวกัน นิยมใช้ในหน้า Webpage บางหน้ามีเนื้อหายาวมาก ทำให้ไม่สะดวกในการอ่านข้อมูล หรือต้องการอำนวยความสะดวกแก่ผู้อ่าน เมื่ออ่านไปสู่ด้านล่างของเนื้อหาแล้วให้สามารถคลิกกลับสู่ด้านบนได้อย่างรวดเร็ว หรือปักตำแหน่งลิงก์จากหน้าอื่น ๆ มาลงยังจุดเนื้อหาปลายทางที่ต้องการได้โดยตรง

สามารถดูรายละเอียด วิธีการสร้างลิงค์ในหน้าเดียวกันด้วยเครื่องมือ Anchor คลิกที่นี่ ค่ะ



  Easy Upload Image (แทรก/แก้ไข รูปภาพแบบง่าย)

เครื่องมือนี้จะช่วยให้คุณสามารถอัพโหลดรูปภาพเข้าสู่เนื้อหาเว็บไซต์ได้อย่างง่าย  เพียงคลิกที่เครื่องมือ Easy Upload Image แล้วเลือกรูปภาพที่ต้องการจากเครื่องคอมพิวเตอร์ และคลิก Open  จากนั้นรูปภาพจะถูกอัพโหลด พร้อมแสดงผลในเนื้อหาของเว็บไซต์ได้ทันทีค่ะ

คุณสมบัติของรูปภาพที่เหมาะสมในการแสดงผลบนหน้าเว็บไซต์ ไฟล์ภาพมีนามสกุล (Type) เป็น .gif / .jpeg / .png  ตั้งชื่อไฟล์เป็นภาษาอังกฤษหรือตัวเลข  และควรย่อภาพให้มีขนาดไม่เกิน (Size) 500 KB เพื่อให้ภาพมีขนาดพอเหมาะกับการแสดงผลบนหน้าเว็บไซต์  ไม่ทำให้หน้าเว็บไซต์โหลดข้อมูลช้าค่ะ
 

     ขั้นตอนการใส่รูปภาพด้วยเครื่องมือ Easy Upload Image

1. คลิกเครื่องมือ Easy Upload Image จากนั้นคลิกปุ่ม "Choose File"  

2. ปรากฎหน้าต่าง "Open" ให้คลิกเลือกรูปที่ต้องการอัพโหลด จากเครื่องคอมพิวเตอร์ของคุณ

3. คลิกปุ่ม "Open"




 

4. ระบบจะอัพโหลดรูปตัวอย่างเข้ามาในหน้าต่าง Easy Upload Image คุณสามารถปรับตั้งค่าการแสดงผลรูปภาพได้ ดังนี้

  • Width กำหนดขนาดความกว้างของรูปภาพ
  • Height กำหนดขนาดความสูงของรูปภาพ
  • Border ใส่เส้นกรอบให้รูปภาพ โดยยิ่งใส่ตัวเลขมากขึ้น เส้นกรอบก็จะแสดงผลหนาขึ้นค่ะ
  • HSpace กำหนดระห่างระหว่างรูปภาพและข้อความในแนวนอน โดยยิ่งใส่ตัวเลขมากขึ้น ระยะห่างก็จะมากขึ้นค่ะ
  • VSpace กำหนดระห่างระหว่างรูปภาพและข้อความในแนวตั้ง โดยยิ่งใส่ตัวเลขมากขึ้น ระยะห่างก็จะมากขึ้นค่ะ
  • Align เลือกการแสดงผลระหว่างรูปภาพและข้อความประกอบ โดยสามารถดูตัวอย่างการจัดวางได้จากกรอบ Preview ค่ะ
  • Short Description ใส่คำอธิบายรูปภาพสั้น ๆ
  • กด OK เพื่อยืนยันการตั้งค่าและใส่รูปภาพลงในส่วนเนื้อหา
      


 

5.รูปภาพที่อัพโหลดจะแสดงผลในส่วนเนื้อหา คุณสามารถเพิ่มรายละเอียดอื่น ๆ ได้ตามต้องการ เมื่อเรียบร้อยแล้ว คลิก "ตกลง" เพื่อบันทึก



 
Upload Image (แทรก/แก้ไข รูปภาพ)

ใช้สำหรับใส่ไฟล์รูปภาพในส่วนเนื้อหาเว็บไซต์ได้เช่นเดียวกันกับเครื่องมือ Easy Upload Image แต่เครื่องมือ Upload Image จะเป็นตัวหลักในการจัดการรูปภาพเพิ่มเติมในบทความแต่ละเรื่อง เช่น การเข้าไปลบรูปภาพที่ไม่ต้องการใช้งาน  การปรับขนาดรูปภาพภายหลังที่ใส่รูปเข้ามาในระบบแล้ว เป็นต้น  

วิธีการใช้งานเครื่องมือ Upload Image

1. คลิกเครื่องมือ   (Upload Image) 

 

2. จะปรากฎหน้าต่าง "Image Properties" คลิกที่ปุ่ม "Browse Server"


3. ปรากฎหน้าต่าง FCKeditor ให้คลิกปุ่ม Choose File 

4. ปรากฎหน้าต่าง "Open" คลิกเลือกรูปภาพที่ต้องการจากเครื่องคอมพิวเตอร์ของคุณ

5.คลิกปุ่ม "Open"

6. คลิกปุ่ม Upload


หลังจากคลิก Upload จะปรากฏรูปภาพที่คุณเลือก ให้คลิกที่รูปภาพ  (และคุณสามารถคลิกรูปกากบาทสีแดงที่อยู่ทางขวาของรูปภาพ เพื่อลบรูปภาพที่ไม่ต้องการใช้งานออกจากเซิฟเวอร์ เพื่อประหยัดพื้นที่การใช้งานได้ค่ะ)


7. รูปภาพที่ Upload มาจะปรากฎในช่อง Preview คุณสามารถกำหนดคุณสมบัติของรูปภาพได้ เช่น 

  • Width กำหนดขนาดความกว้างของรูปภาพ
  • Height กำหนดขนาดความสูงของรูปภาพ
  • Border ใส่เส้นกรอบให้รูปภาพ โดยยิ่งใส่ตัวเลขมากขึ้น เส้นกรอบก็จะแสดงผลหนาขึ้นค่ะ
  • HSpace กำหนดระห่างระหว่างรูปภาพและข้อความในแนวนอน โดยยิ่งใส่ตัวเลขมากขึ้น ระยะห่างก็จะมากขึ้นค่ะ
  • VSpace กำหนดระห่างระหว่างรูปภาพและข้อความในแนวตั้ง โดยยิ่งใส่ตัวเลขมากขึ้น ระยะห่างก็จะมากขึ้นค่ะ
  • Align เลือกการแสดงผลระหว่างรูปภาพและข้อความประกอบ โดยสามารถดูตัวอย่างการจัดวางได้จากกรอบ Preview ค่ะ
  • Short Description ใส่คำอธิบายรูปภาพสั้น ๆ
  • กด OK เพื่อยืนยันการตั้งค่าและใส่รูปภาพลงในส่วนเนื้อหา
      

 

8. รูปภาพที่อัพโหลดจะแสดงผลในส่วนเนื้อหา คุณสามารถเพิ่มรายละเอียดอื่น ๆ ได้ตามต้องการ หรือหากต้องการแก้ไขการตั้งค่ารายละเอียดรูปภาพอีกครั้ง ก็สามารถ คลิกที่รูปและคลิกที่เครื่องมือ Upload Image ก็จะปรากฎหน้าต่าง Image Properties ค่ะ

เมื่อเรียบร้อยแก้ไขแล้ว คลิก "ตกลง" เพื่อบันทึก


 



 
Upload File (เพิ่มไฟล์เอกสาร)

ใช้สำหรับ Upload ไฟล์ขึ้นสู่ Server โดยไฟล์ที่ระบบเว็บไซต์สำเร็จรูป VelaClassic รองรับมีรายละเอียดดังนี้ค่ะ

      รองรับไฟล์เอกสารนามสกุล.doc, .xls, .ppt, .pdf, .txt, .zip, และ .rar

      รองรับไฟล์เสียง นามสกุล .avi, .mp3, .flv, .mov, .mp4, .mpeg, .mpg, .wav, .wma, .wmv

      ขนาดไฟล์ไม่เกิน 10 MB ต่อการอัพโหลด 1 ครั้ง

      ตั้งชื่อไฟล์ด้วยอักษรภาษาอังกฤษหรือตัวเลข ไม่มีสัญลักษณ์พิเศษ เช่น . () / , - # 
 

วิธีการใช้งานเครื่องมือ Upload File 

1. คลิกที่เครื่องมือ Upload Files 

2. ปรากฎหน้าต่าง "File Properties"  คลิกปุ่ม "Browse Server"



 

3. ในหน้าต่าง "FCKeditor" คลิกที่ปุ่ม "Choose File"

4. ปรากฎหน้าต่าง "Open" ให้คลิกเลือกไฟล์ที่ต้องการจากเครื่องคอมพิวเตอร์ของคุณ

5. กดปุ่ม "Open"

6. กดปุ่ม "Upload"

7.  หลังจากคลิก Upload จะปรากฎชื่อไฟล์  ให้คลิกที่ไฟล์ข้อมูลที่ต้องการ (และคุณสามารถคลิกรูปกากบาทสีแดงที่อยู่ทางขวาของไฟล์เอกสาร เพื่อลบไฟล์ที่ไม่ต้องการใช้งานออกจากเซิฟเวอร์ เพื่อประหยัดพื้นที่การใช้งานได้ค่ะ)


8. จะมีข้อมูลปรากฎในหน้าต่าง "File Properties"  คุณสามารถพิมพ์ข้อความที่ต้องการให้แสดงเป็นลิงก์สำหรับคลิกดาวน์โหลดไฟล์บนหน้าเว็บไซต์ ในช่อง Caption ได้ตามต้องการ  จากนั้นคลิก OK  

 

การแสดงผลบนหน้าเว็บไซต์ เมื่อคลิกลิงก์ข้อความแล้วจะปรากฎไฟล์เอกสารสำหรับเปิดอ่านหรือให้เก็บบันทึกได้



 
Find (ค้นหา)

ใช้สำหรับค้นหาข้อความที่ต้องการ โดยคลิกที่เครื่องมือ Find แล้วพิมพ์ข้อความที่ต้องการค้นหาในช่อง "Find what" หลังจากนั้นคลิก "Find" เพื่อค้นหาคำดังกล่าว ดังรูปภาพ

กรณีติ๊กเลือก Match case = จะค้นหาเฉพาะคำที่ตัวพิมพ์ใหญ่-เล็ก ต้องตรงกัน
กรณีติ๊กเลือก Match whole word = ข้อมูลที่ค้นหาต้องตรงกันทุกคำ


 
 
Replace (ค้นหาและแทนที่)

ใช้สำหรับค้นหาและแทนที่ข้อความที่ต้องการ  โดยพิมพ์ข้อความที่ต้องการค้นหาในช่อง "Find what" และพิมพ์ข้อความที่ต้องการแทนที่ในช่อง "Replace with" ดังรูปภาพ

กรณีติ๊กเลือก Match case = จะค้นหาเฉพาะคำที่ตัวพิมพ์ใหญ่-เล็ก ต้องตรงกัน
กรณีติ๊กเลือก Match whole word = ข้อมูลที่ค้นหาต้องตรงกันทุกคำ


 
 
Select All (เลือกทั้งหมด)

คลิกเพื่อไฮไลท์คลุมข้อมูลในส่วนเนื้อหานั้นทั้งหมด โดยคลิกที่เครื่องมือ Select All ดังรูปภาพ


 
 
Cut (ตัด)

ใช้ตัดข้อความที่เลือก เพื่อนำไปวางที่ตำแหน่งอื่นแทน หรือตัดออกจาส่วนเนื้อหา โดยคลิกเมาส์ไฮไลท์คลุมข้อความหรือคลิกที่รูปภาพที่ต้องการตัด  จากนั้นคลิกที่เครื่องมือ Cut ดังรูปภาพ


 
 Copy (คัดลอก)

โดยคลิกเมาส์ไฮไลท์คลุมข้อความหรือคลิกที่รูปภาพที่ต้องการคัดลอก คลิกที่เครื่องมือ Copy ดังรูปภาพ


 
 Paste (วาง)

ใช้วางข้อความ/รูปภาพที่คัดลอกหรือตัดมา โดยนำเคอร์เซอร์เมาส์ คลิกไว้ในตำแหน่งที่ต้องการวางข้อความ คลิกที่เครื่องมือ Paste ดังรูปภาพ



 
Paste from Word (วางสำเนาจากตัวอักษรเวิร์ด)

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

โดยนำเคอร์เซอร์เมาส์ คลิกไว้ในตำแหน่งที่ต้องการวางข้อความ คลิกที่เครื่องมือ Paste from Word แล้วกดปุ่ม Ctrl+V ที่คีย์บอร์ดเพื่อวางเนื้อหาที่คัดลอกมาในหน้าต่างดังกล่าว  และคลิก OK  ค่ะ



 
Undo (ยกเลิกคำสั่ง)

ใช้ย้อนกลับข้อมูลให้แสดงผลไปก่อนหน้า โดยคลิกที่เครื่องมือ Undo เพื่อยกเลิกคำสั่ง ดังรูปภาพ



 
Redo (ซ้ำคำสั่งก่อนหน้า)

ใช้ทำซ้ำคำสั่งก่อนหน้า (เกิดหลังจากการกด Undo) โดยคลิกที่เครื่องมือ Redo ดังรูปภาพ



 
Insert/Edit Table (แทรก/แก้ไข ตาราง)
 

ใช้สำหรับสร้างตาราง หรือแก้ไขตารางที่สร้างมาแล้ว โดยคลิกที่เครื่องมือ Insert/Edit Table ดังรูปภาพ

และสามารถตั้งค่า Properties ของตารางได้ดังนี้

  • Rows คือ จำนวนแถวแนวนอน ที่ต้องการสร้าง
  • Columns คือ จำนวนคอลัมน์ (แถวแนวตั้ง) ที่ต้องการสร้าง
  • Border size คือ ขนาดความหนาของเส้นขอบตาราง (หากใส่เลข 0 จะเป็นการซ่อนเส้นขอบตารางไม่ให้แสดงค่ะ)
  • Alignment คือ ตำแหน่งการแสดงผลของตารางในส่วนเนื้อหา ให้อยู่ชิดซ้าย กึ่งกลาง หรือชิดขวาหน้าเว็บไซต์
  • Width คือ ขนาดความกว้างของตาราง (แนะนำให้ตั้งค่าเป็น 100 percent เพื่อให้ตารางแสดงผลพอดีในทุกหน้าจออุปกรณ์ที่เปิดชมเว็บไซต์)
  • Height คือ ขนาดความสูงของตาราง
  • Cell Spacing คือ ขนาดพื้นที่ความกว้างของเส้นขอบตาราง (ตัวเลขยิ่งมาก เส้นขอบตารางจะยิ่งกว้าง)
  • Cell Padding คือ ระยะห่างระหว่างเส้นขอบตารางและข้อมูลในแต่ละช่อง (ตัวเลขยิ่งมาก ระยะห่างก็จะมากขึ้น)
  • Caption คือ คำอธิบายหรือหัวข้อตาราง (แสดงผลเหนือตาราง)
  • Summary คือ คำอธิบายรายละเอียดสรุปของตาราง (ไม่แสดงผลบนหน้าเว็บไซต์ แต่จะปรากฎเมื่อแสดงรายละเอียดตารางในลักษณะโค้ด HTML)

และเมื่อเพิ่มตารางในเนื้อหาแล้ว ต้องการตั้งค่าของตารางเดิมเพิ่มเติม สามารถคลิกขวาที่บริเวณตาราง และคลิกเมนู "Table Properties" ก็จะปรากฎหน้าต่างให้ตั้งค่าดังรูปข้างต้นอีกครั้งค่ะ



 Insert Cell 
(แทรกช่อง)
 

ใช้สำหรับการแทรกช่องของตารางเพิ่ม โดยคลิกที่เครื่องมือ Insert Cell ซึ่งจะเพิ่มให้ทางขวาของ Cell ที่มี cursor เมาส์อยู่ค่ะ  

และเว็บมาสเตอร์สามารถคลิกขวาที่บริเวณ Cell ตาราง เลือกเมนู "Cell" จะพบกับคำสั่งเพิ่มเติม คือ Insert Cell Before (แทรกช่องด้านหน้า) และ Insert Cell After (แทรกช่องด้านหลัง) ค่ะ

 



 Delete Cells (ลบช่องตาราง) 

ใช้สำหรับลบช่องตารางที่ตำแหน่ง cursor เมาส์อยู่ โดยคลิกที่เครื่องมือ Delete Cells ดังรูปภาพ



 
Merge Cells (ผสานช่อง) 

ใช้สำหรับผสานคอลัมน์ของตาราง โดยคลิกที่เครื่องมือ Merge Cell  ดังรูปภาพ

และเว็บมาสเตอร์สามารถคลิกขวาที่บริเวณ Cell ตาราง เลือกเมนู "Cell" จะพบกับคำสั่งเพิ่มเติม คือ Merge Right (ผสานช่องคอลัมน์ด้านขวา) และ Merge Down (ผสานแถวด้านล่าง) ค่ะ

 



 Split Cell (ตัดแบ่งช่องตาราง)

ใช้สำหรับเพิ่มช่องตารางแบบแนวตั้ง โดยคลิกที่เครื่องมือ Split Cell ดังรูปภาพ

และเว็บมาสเตอร์สามารถคลิกขวาที่บริเวณ Cell ตาราง เลือกเมนู "Cell" จะพบกับคำสั่งเพิ่มเติม คือ Split Cell Horizontally (ตัดแบ่งเพื่อเพิ่มช่องตารางแบบแนวนอน) และ Split Cell Vertically (ตัดแบ่งเพื่อเพิ่มช่องตารางแบบแนวตั้ง) ค่ะ


 
 Cell Properties

ใช้สำหรับปรับแต่งการแสดงผลของช่องตารางเพิ่มเติม เช่น

  • Width : ขนาดความกว้างของช่องตาราง
  • Height : ขนาดความความสูงของช่องตาราง 
  • Background color : ใส่สีพื้นหลัง
  • Border Color : ใส่สีเส้นขอบช่องตาราง
  • Vertical Alignment : การจัดตำแหน่งของตัวอักษรในช่องตารางแบบแนวตั้ง
  • Horizontal Alignment : การจัดตำแหน่งของตัวอักษรในช่องตารางแบบแนวนอน เป็นต้น



 
Insert Row (แทรกแถว)

ใช้สำหรับเพิ่มแถวของตาราง โดยคลิกที่เครื่องมือ Insert Row จะมีแถวของตารางเพิ่มขึ้นด้านล่างต่อจากแถวที่มี cursor เมาส์อยู่ค่ะ 

และเว็บมาสเตอร์สามารถคลิกขวาที่บริเวณตาราง เลือกเมนู "Row" จะพบกับคำสั่งเพิ่มเติม คือ Insert Row Before (แทรกเพิ่มแถวด้านบน) และ Insert Row After (แทรกแถวเพิ่มด้านล่าง) ค่ะ



 Delete Row (ลบแถว) :

ใช้ในการลบแถวตาราง โดยให้คลิก cursor เมาส์วางในแถวที่ต้องการจะลบ และคลิกที่เครื่องมือ Delete Row ดังรูปภาพ



 
Insert Column (แทรกคอลัมน์) 

ใช้สำหรับเพิ่มคอลัมน์ของตาราง โดยคลิกที่เครื่องมือ Insert Column จะมีคอลัมน์เพิ่มขึ้นด้านหลัง (ด้านขวา) ต่อจากคอลัมน์ที่มี cursor เมาส์อยู่ค่ะ 

และเว็บมาสเตอร์สามารถคลิกขวาที่บริเวณตาราง เลือกเมนู "Column" จะพบกับคำสั่งเพิ่มเติม คือ Insert Column Before (เพิ่มคอลัมน์ด้านหน้า) และ Insert Column After (เพิ่มคอลัมน์ด้านหลัง) ค่ะ



 
Delete Column (ลบคอลัมน์)
 

ใช้สำหรับลบคอลัมน์ โดยให้คลิก cursor เมาส์วางในคอลัมน์ที่ต้องการจะลบ และคลิกที่เครื่องมือ Delete Column ดังรูปภาพ

 

และหากต้องการลบตารางออกจากส่วนเนื้อหาบทความ สามารถทำได้โดย คลิกขวาบริเวณตาราง จากนั้นคลิกคำสั่ง "Delete Table" เพื่อลบตารางได้เลยค่ะ



 
Create Order Button (สร้างปุ่มตะกร้าสินค้า)
:

สำหรับเว็บไซต์ที่ใช้งานระบบร้านค้าหรือ Shopping Cart จะใช้ในการสร้างปุ่มตะกร้าสินค้าในหน้ารายละเอียดบทความ (เป็นบทความที่นำเสนอข้อมูลสินค้าที่พร้อมให้สั่งซื้อได้

โดยคลิกที่เครื่องมือ Create Order Button จะปรากฏหน้าต่าง ดังรูปภาพ



 

จากนั้นกรอกข้อมูลในส่วนต่าง ๆ ดังนี้

1. กรอกข้อมูล  รหัสสินค้า, ชื่อสินค้า,รายละเอียดสินค้า, ราคา, ค่าจัดส่ง 

- รหัสสินค้า (SKU) กรอกรหัสของสินค้า ตรงนี้ในเว็บไซต์หนึ่ง ๆ ไม่ควรมีรหัสสินค้าซ้ำกัน และต้องกรอกเป็นตัวเลข หรือภาษาอังกฤษเท่านั้น
- ชื่อสินค้า (Product Name) กรอกชื่อสินค้า
- รายละเอียดสินค้า (Product Description) กรอกรายละเอียดสินค้า ไม่ควรยาวมาก
- ราคา (Price) กรอกราคาของสินค้า สามารถกรอกเป็นทศนิยม เช่น 100.00 ได้ 

2. เลือกปุ่มสั่งซื้อ  เลือกรูปแบบของปุ่มที่ต้องการให้แสดง 

3. คลิกปุ่ม Create Code

4. จะแสดงผล Code Form การสั่งซื้อ ให้คลิกปุ่ม OK ดังรูปภาพ

 

ตัวอย่างการแสดงผลปุ่มสั่งซื้อที่สร้างจากเครื่องมือ Create Order Button



 
Create User Payment Form (สร้างแบบฟอร์ม Payment)
 

สำหรับเว็บไซต์ที่ใช้งาน ระบบร้านค้าหรือ Shopping Cart ใช้สำหรับสร้างแบบฟอร์มการสั่งซื้อที่ให้ลูกค้าเป็นผู้กรอกราคาเอง โดยคลิกที่เครื่องมือ Create User Payment Form จะปรากฏหน้าต่างดังรูป


จากนั้น ทำการขั้นตอนดังนี้

1. เลือกปุ่มสั่งซื้อ  เลือกรูปแบบของปุ่มที่ต้องการให้แสดง 

2. คลิกปุ่ม Create Code

3. จะแสดงผล Code Form การสั่งซื้อ ให้คลิกปุ่ม OK ดังรูปภาพ

 
 

ตัวอย่างการแสดงผลแบบฟอร์ม Payment บนหน้าเว็บไซต์


 
* หมายเหตุ : สำหรับท่านเจ้าของเว็บไซต์ VelaClassic ที่ประสงค์จะเปลี่ยน Text editor มาใช้งานเวอร์ชั่น CKeditor หรือเปลี่ยนจาก CKeditor ไปเป็นเวอร์ชั่นเดิม จะต้องให้ทาง ReadyPlanet เป็นผู้ดำเนินการให้ โดยมีเงื่อนไขดังนี้ค่ะ

แจ้งความประสงค์การเปลี่ยนได้ที่อีเมล info@readyplanet.com พร้อมระบุชื่อเว็บไซต์และสาเหตุที่ต้องการเปลี่ยน 

- หากแจ้งเปลี่ยน Editor แล้วไม่สามารถแจ้งยกเลิกกลับมาใช้ Editor เดิมได้

การเปลี่ยน Editor จะส่งผลต่อการใส่ข้อมูลก่อนหน้า (เนื่องจาก source code ต่างกัน) ทำให้รูปแบบเปลี่ยนไป ต้องทำการตรวจสอบหรือแก้ไขการจัดรูปแบบใหม่ ให้ตรงตามต้องการ 




Editor Manual

เลือกเวอร์ชั่น Text Editor
วิธีการใช้งานเครื่องมือ Text Editor (CKeditor)