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 (CKeditor)

 

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

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

 

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

 


 

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


 
Font Name (เลือกรูปแบบตัวอักษร)
 

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



 
Font Size (เลือกขนาดตัวอักษร)

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

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



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

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



 Source (ดูรหัส HTML)

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



  
Bold (ตัวอักษรหนา)

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



  
Italic (ตัวอักษรเอียง) 

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



 Underline (ขีดเส้นใต้ตัวอักษร)

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



 
Strikethrough (ขีดเส้นทับตัวอักษร)

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



 
Subscript (ตัวอักษรห้อย)

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



 
Superscript (ยกตัวอักษร)

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



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

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



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

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



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

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

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



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

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



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

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



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

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



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

ใช้ในการจัดรูปแบบตัวอักษรให้เต็มหน้า Page ซึ่งตัวอักษรจะแสดงผลเท่ากันทั้งขอบด้านซ้ายและขวาทุกบรรทัด โดยการคลิกเมาส์ไฮไลท์คลุมตัวอักษรที่ต้องการ แล้วคลิกที่เครื่องมือ 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  เพื่อเลือกสัญลักษณ์  ดังรูปภาพ


 
 
Link(แทรก/แก้ไข ลิงก์)

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

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



 

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


 

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


 

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


 

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

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



 
Unlink (ลบลิงก์)

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



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

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

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



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

ใช้สำหรับใส่ไฟล์รูปภาพในส่วนเนื้อหาเว็บไซต์ โดยสามารถอัพโหลด ได้ 2 รูปแบบคือ

  • อัพโหลดในแท็บ Image Info : นอกจากจะเป็นส่วนที่ใช้อัพโหลดภาพแล้ว ยังเป็นส่วนหลักในการจัดการรูปภาพเพิ่มเติมในบทความแต่ละเรื่อง เช่น การเข้าไปลบรูปภาพที่ไม่ต้องการใช้งาน  การปรับขนาดรูปภาพภายหลังที่ใส่รูปเข้ามาในระบบแล้ว เป็นต้น  โดยมีขั้นตอนการใช้งานดังนี้

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

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


3) ปรากฎหน้าต่าง KCFinder ให้คลิกปุ่ม "Upload"

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

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


6) ระบบจะทำการอัพโหลดรูปภาพมาบนเซิฟเวอร์ เมื่อเรียบร้อยแล้วจะปรากฏรูปภาพในหน้าต่าง KCFinder ให้ดับเบิลคลิกที่รูปภาพ หรือคลิกขวาที่รูปแล้วเลือก Select 

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


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

Alternative Text ใส่คำอธิบายรูปภาพสั้น ๆ

Width กำหนดขนาดความกว้างของรูปภาพ

Height กำหนดขนาดความสูงของรูปภาพ

Border ใส่เส้นกรอบให้รูปภาพ โดยยิ่งใส่ตัวเลขมากขึ้น เส้นกรอบก็จะแสดงผลหนาขึ้นค่ะ

HSpace กำหนดระห่างระหว่างรูปภาพและข้อความในแนวนอน โดยยิ่งใส่ตัวเลขมากขึ้น ระยะห่างก็จะมากขึ้นค่ะ

VSpace กำหนดระห่างระหว่างรูปภาพและข้อความในแนวตั้ง โดยยิ่งใส่ตัวเลขมากขึ้น ระยะห่างก็จะมากขึ้นค่ะ

Alignment เลือกการแสดงผลระหว่างรูปภาพและข้อความประกอบ โดยสามารถดูตัวอย่างการจัดวางได้จากกรอบ Preview ค่ะ

8) กด OK เพื่อยืนยันการตั้งค่าและใส่รูปภาพลงในส่วนเนื้อหา
  

 

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

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

 

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

1) คลิกเครื่องมือ Image เมื่อปรากฎหน้าต่าง "Image Properties" ให้คลิกแท็บ "Upload"

2) คลิกที่ปุ่ม "Choose File"

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

4) คลิกปุ่ม "Open"

5) คลิกปุ่ม "Send it to the Server"


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

Alternative Text ใส่คำอธิบายรูปภาพสั้น ๆ

Width กำหนดขนาดความกว้างของรูปภาพ

Height กำหนดขนาดความสูงของรูปภาพ

Border ใส่เส้นกรอบให้รูปภาพ โดยยิ่งใส่ตัวเลขมากขึ้น เส้นกรอบก็จะแสดงผลหนาขึ้นค่ะ

HSpace กำหนดระห่างระหว่างรูปภาพและข้อความในแนวนอน โดยยิ่งใส่ตัวเลขมากขึ้น ระยะห่างก็จะมากขึ้นค่ะ

VSpace กำหนดระห่างระหว่างรูปภาพและข้อความในแนวตั้ง โดยยิ่งใส่ตัวเลขมากขึ้น ระยะห่างก็จะมากขึ้นค่ะ

Alignment เลือกการแสดงผลระหว่างรูปภาพและข้อความประกอบ โดยสามารถดูตัวอย่างการจัดวางได้จากกรอบ Preview ค่ะ

7) กด OK เพื่อยืนยันการตั้งค่าและใส่รูปภาพลงในส่วนเนื้อหา

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


 


 
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. ในหน้าต่าง "KCFinder" คลิกที่ปุ่ม "Upload"

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

5. กดปุ่ม "Open"


6.  หลังจากคลิก Upload จะปรากฎไฟล์  ให้ดับเบิลคลิกที่ไฟล์ข้อมูลที่ต้องการ  หรือคลิกขวาที่ไฟล์แล้วเลือก Select 

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


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

8. คลิก OK จะเกิดลิงก์ดาวน์โหลดไฟล์ในส่วนเนื้อหา

 

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



 
Find (ค้นหา)

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

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

กรณีติ๊กเลือก Match whole word = ข้อมูลที่ค้นหาต้องตรงกันทุกคำ

กรณีติ๊กเลือก Match Cyclic = เมื่อค้นหาคำจนถึงตำแหน่งสุดท้าย หากกด Find อีกครั้ง ระบบจะค้นหาย้อนกลับขึ้นไปยังคำที่อยู่ตำแหน่งแรกสุดอีกครั้ง
 


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

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

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

กรณีติ๊กเลือก Match whole word = ข้อมูลที่ค้นหาต้องตรงกันทุกคำ

กรณีติ๊กเลือก Match Cyclic = เมื่อค้นหาคำจนถึงตำแหน่งสุดท้าย หากกด Find อีกครั้ง ระบบจะค้นหาย้อนกลับขึ้นไปยังคำที่อยู่ตำแหน่งแรกสุดอีกครั้ง


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

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


 
 
Cut (ตัด)

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


 
 Copy (คัดลอก)

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


 
 Paste (วาง)

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



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

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

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



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

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



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

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



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

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

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

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


และเมื่อเพิ่มตารางในเนื้อหาแล้ว สามารถคลิกขวาที่บริเวณตาราง เพื่อตั้งค่าอื่น ๆ เพิ่มเติมได้ ดังนี้


1. Cell ช่องตาราง ประกอบด้วยคำสั่ง
 

1.1. Insert Cell Before แทรกช่องด้านหน้า (ด้านซ้าย) ของ Cell ที่มี cursor เมาส์อยู่

1.2. Insert Cell After แทรกช่องด้านหลัง (ด้านขวา) ของ Cell ที่มี cursor เมาส์อยู่

1.3. Delete Cells ใช้สำหรับลบช่องตารางที่ตำแหน่ง cursor เมาส์อยู่ 

1.4. Merge Right ผสานช่องตารางของ Cell ที่มี cursor เมาส์อยู่ เข้ากับ Cell ที่อยู่ทางด้านขวา

1.5. Merge Down  ผสานช่องตารางของ Cell ที่มี cursor เมาส์อยู่ เข้ากับ Cell ที่อยู่ทางด้านล่าง

1.6. Split Cell Horizontally ตัดแบ่งเพื่อเพิ่ม Cell ตารางแบบแนวนอน

1.7. Split Cell Vertically ตัดแบ่งเพื่อเพิ่ม Cell ตารางแบบแนวตั้ง

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

Width : ขนาดความกว้างของช่องตาราง

Height : ขนาดความความสูงของช่องตาราง 

Background color : ใส่สีพื้นหลัง

Border Color : ใส่สีเส้นขอบช่องตาราง

Vertical Alignment : การจัดตำแหน่งของตัวอักษรในช่องตารางแบบแนวตั้ง

Horizontal Alignment : การจัดตำแหน่งของตัวอักษรในช่องตารางแบบแนวนอน เป็นต้น


2. Row แถวแนวนอนของตาราง ประกอบด้วยคำสั่ง

2.1. Insert Row Before แทรกเพิ่มแถวด้านบน เหนือแถวที่มี cursor เมาส์อยู่ 

2.2. Insert Row After แทรกแถวเพิ่มด้านล่าง ใต้แถวที่มี cursor เมาส์อยู่ 

2.3. Delete Row ลบแถวตารางที่ตำแหน่ง cursor เมาส์อยู่ 


3. Column แถวแนวตั้งของตาราง ประกอบด้วยคำสั่ง

3.1. Insert Column Before เพิ่มคอลัมน์ด้านหน้า (ด้านซ้าย) ของ column ที่มี cursor เมาส์อยู่

3.2. Insert Column After เพิ่มคอลัมน์ด้านหลัง (ด้านขวา) ของ column ที่มี cursor เมาส์อยู่

3.3. Delete Column ลบคอลัมน์ที่ตำแหน่ง cursor เมาส์อยู่ 
 

4. Delete Table คลิกเพื่อลบตารางนั้น ๆ ทิ้ง

5. Table Properties คลิกเพื่อแก้ไขการตั้งค่า Properties ของตารางเดิมทั้งตารางอีกครั้ง 



 Smiley (แทรกสัญลักษณ์อีโมติคอน)

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


 


 

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

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

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

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




Editor Manual

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