เกี่ยวกับตัวช่วยพิมพ์ และการแทรกภาพลงในโพส

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

การใช้ตัวช่วยพิมพ์

ใครเคยเล่นเวปบอร์ดพวกตระกูล phpnuke มาก่อน น่าจะคุ้นเคยกับการพิมพ์และการจัดตัวหนังสือแบบมี html tag ติดคู่ไปกับตัวหนังสือด้วย
ตัวระบบที่ผมใช้นี้ก็ไม่หนีกันมากครับ มีตัวช่วยเสริมมาบ้างนิดหน่อย ตามนี้
text-buttons.jpg
1. ปุ่มแทรกรูป
สำหรับแทรกภาพเข้ามาในกล่องข้อความขณะพิมพ์ครับ อธิบายอย่างละเอียดเอาไว้แล้วที่นี่ครับ http://macmuemai.com/content/805
2. ปุ่มแทรก link หรือ URL
เอาไว้สำหรับทำให้ข้อความที่เราต้องการ link ไปยัง URL หน้าเวปที่เรากำหนด วิธีใช้คือ

  1. hi-light ข้อความที่เราต้องการก่อน
  2. แล้วค่อยเลือกปุ่มนี้
  3. จากนั้นใส่ URL ที่เราต้องการลงไป แล้วกด OK ครับ
    1. และ 5. ปุ่มปรับตัวหนา, ตัวเอียง และปรับขนาดหัวเรื่อง วิธีใช้เหมือนกันคือ
  1. hi-light ข้อความที่เราต้องการก่อน
  2. แล้วค่อยเลือกปุ่มนี้
  1. ปุ่มร่นระยะ (Indent)
    จะทำให้ข้อความที่เราพิมพ์ร่นเข้ามาระดับนึง ส่วนมากเอาไว้ใส่พวกคำอธิบายต่าง ๆ ทำให้อ่านได้ง่ายเพราะดูเป็นสัดส่วนครับ - ใช้แล้วจะได้ผลประมาณคำอธิบายของปุ่มนี้ครับ คือจะร่นเข้ามานิดนึง
  2. ปุ่น Quote ข้อความ
    เอาไว้อ้างอิงข้อความจากคำตอบของบุคคลอื่น วิธีใช้ก็
  1. copy ข้อความที่เราต้องการมาลงในกล่องข้อความของเรา
  2. hi-light ตัวข้อความ
  3. แล้วกดปุ่ม quote นี้ครับ

ผลที่ได้จะเป็นประมาณนี้
ทดสอบการใช้ปุ่ม quote ในกล่องพิมพ์ข้อความ
8-9. ปุ่มใส่ list
ปุ่ม 8 เป็นรายการแบบไล่ลำดับ ส่วนปุ่ม 9 เป็นรายการแบบไม่เจาะจงลำดับครับ แบบนี้

  1. ปุ่ม 8 รายการ a
  2. ปุ่ม 8 รายการ b
  3. ปุ่ม 8 รายการ c
  • ปุ่ม 9 รายการ a
  • ปุ่ม 9 รายการ b
  • ปุ่ม 9 รายการ c
  1. ปุ่มตัดส่วน Teaser
    ส่วน Teaser คือส่วนเนื้อหาโดยย่อ ที่เรามักจะเห็นโพสตัดตอนมาจากเนื้อหาเต็ม ๆ ของเวปอีกหน้าหนึ่ง ประมาณหน้าหนึ่งของหนังสือพิมพ์ ที่จะมีเรื่องย่อแล้วให้ตามอ่านต่อที่เหลือเต็ม ๆ ด้านใน เจ้าเรื่องย่อในหน้าหนึ่งนี้คือที่ระบบจะเรียกว่า Teaser ครับ

ปุ่มนี้เอาไว้สำหรับตัดเนื้อหาโดยย่อจากเนื้อหาเต็ม ๆ ของเราเพื่อเอาไว้แสดงผลในหน้าอื่น ใครที่เขียน tutorial เข้าเวปนี้คงอาจจะได้ใช้บ้าง แต่ถึงไม่กำหนดตรงนี้ ผมได้ตั้งให้ทางระบบตัดเนื้อหาโดยย่อให้เองแล้วเหมือนกันครับ แต่บางทีระบบจะตัดคำแบบขาด ๆ เกิน ๆ ก็อาจจะต้องมาใช้ปุ่มนี้ช่วยกำหนดการตัดตอนให้เป็นไปตามที่ควรจะเป็นครับ
11. ปุ่ม Preview
ปุ่มแสดงผลของตัวข้อความเราที่พิมพ์ไปใส่ html tag ไป ถ้าใครอยากจะทราบว่าหน้าตาพอ save แล้วจะออกมาประมาณไหน ก็กดปุ่มนี้ดูก่อนคร่าว ๆ ได้นะครับ หรือจะกดปุ่ม Preview ที่อยู่ด้านล่างของหน้าเวปก็ได้ ให้ผลเหมือนกัน แต่กดจากปุ่มลูกตา (Preview) นี้จะแสดงผลได้เร็วกว่า เพราะไม่ต้องโหลดหน้าเวปใหม่เหมือนปุ่ม Preview ด้านล่างครับ
12. ปุ่น Help
เป็นชื่อรวมของทุกปุ่มว่ามีชื่อว่าอะไรบ้าง สำหรับคนที่ยังไม่คุ้น และอาจจะลืมว่าแต่ละปุ่มเอาไว้ทำอะไรนะครับ เอาไว้ดูเตือนได้จากตรงนี้
หมดแล้วครับ หวังว่าคงช่วยให้ใช้งานพิมพ์ได้สะดวกมากขึ้นนะครับ =)

การแทรกภาพลงในกระทู้ (โพสแรก) #1 - แบบละเอียด

นี่เป็นการแทรกภาพลงในกระทู้ สำหรับโพสแรกของกระทู้นั้น ๆ นะครับ (ไม่ใช่ส่วน comment)

ที่เราต้องทำคือทำการ upload ภาพเข้ามาในกระทู้ผ่านตัวช่วยพิมพ์แบบใหม่ (อ่านการใช้งานตัวช่วยพิมพ์แบบใหม่บนเวปแบบอื่น ๆ ได้ที่นี่ครับ http://macmuemai.com/content/806)

การแทรกภาพในกระทู้

ในหน้าพิมพ์กระทู้ปรกติ

forum-isrt-img-02.jpg

ขั้นตอนที่ 1. คลิ๊กปุ่ม Insert/edit image (อันซ้ายมือสุด)
ขั้นตอนที่ 2. เลือก Browse จากนั้นจะมีหน้าต่างใหม่แสดง Pop up ขึ้นมา ให้ทำตามขั้นตอนด้านล่างนี้ไปเรื่อย ๆ นะครับ (สำหรับผู้ใช้ Safari ที่ block pop up windows เอาไว้ เค้าจะเปิดหน้าเวป เป็น Tab ใหม่ขึ้นมาครับ)

note : ถ้าเราต้องการแทรกภาพจาก URL ที่เรามี (link ภาพมาจากเวปฝากภาพหรือเวปอื่น) ให้นำ URL ของภาพนั้นมาแป่ะในช่อง Image URL แล้วกด OK ได้เลย .. ส่วนถ้าใครต้องการส่งภาพเข้าระบบของแมคมือใหม่โดยตรง ให้ทำตามขั้นตอนที่เหลือด้านล่างนี้นะครับ..

forum-isrt-img-04.jpg

ขั้นตอนที่ 3. คลิ๊กปุ่ม Upload เพื่อแสดงช่องสำหรับ upload ไฟล์เข้าระบบครับ
ขั้นตอนที่ 4. ทำการเลือกไฟล์ภาพที่ต้องการ
ขั้นตอนที่ 5. คลิ๊ก Upload เพื่อส่งไฟล์ภาพเข้าระบบ
ขั้นตอนที่ 6. เมื่อไฟล์ภาพถูก upload เข้าระบบแล้ว เราจะเห็นแสดงอยู่ในรายการทางด้านขวา และแสดงภาพ preview ในด้านล่าง (ถ้าต้องการ upload ภาพมากกว่า 1 ภาพ สามารถทำซ้ำขั้นตอนที่ 4-5 ใหม่ได้เรื่อย ๆ จากตรงนี้ครับ)
ขั้นตอนที่ 7. เมื่อ upload ภาพทุกอย่างเรียบร้อยแล้ว คลิ๊ก Send to Bueditor เพื่อส่งภาพที่เราเลือกเอาไว้นี้ กลับไปยังตัวช่วยพิมพ์ในตอนแรก (สำหรับผู้ใช้ Safari เมื่อคลิ๊กแล้ว เค้าจะเหมือนไม่มีอะไรเกิดขึ้น ให้กลับมาดูใน Tab ที่แล้วครับ)

forum-isrt-img-01.jpg

ขั้นตอนที่ 8. จากนั้นคลิ๊ก OK
ขั้นตอนที่ 9. เราจะกลับมาที่หน้าเวปตอนพิมพ์ปรกติเราจะเห็นว่า มี code ของไฟล์ภาพที่เราต้องการแป่ะอยู่ในกล่องข้อความของเราแล้ว ให้คลิ๊กปุ่ม Preview (รูปลูกตาที่ลูกศรชี้ไว้ในภาพ) เพื่อเป็นการ preview โพสของเราโดยที่ไม่ต้อง refresh หน้าจอใหม่ เราจะเห็นแบบนี้ครับ

forum-isrt-img-05.jpg

จากนั้น ถ้าใครต้องการจะแทรกภาพตรงไหน ก็ให้ทำซ้ำแบบเดิมจาก 1-8 ครับ (ไม่จำเป็นต้อง Preview ทุกครั้งก็ได้)

ถ้าทุกอย่างเป็นไปตามที่ต้องการแล้ว ที่ด้านล่าง คลิ๊กปุ่ม Submit เพื่อเป็นการยืนยันส่งกระทู้เข้า Forum ครับ

note : ควรจะตั้งชื่อไฟล์ใหม่ด้วยทุกครั้ง เพื่อเป็นการหลีกเลี่ยงชื่อไฟล์ซ้ำซ้อนในระบบ และทำให้ภาพหายครับ

การแทรกภาพลงในกระทู้ (โพสแรก) #2 - อย่างง่าย

เป็นอีกวิธีสำหรับการแทรกภาพลงในกระทู้ ที่มีขั้นตอนน้อยกว่า<a <a href="href="http://macmuemai.com/content/805">แบบแรกที่ผมเคยโพสไปพอสมควรครับ แต่ว่าเราจะไม่เห็นภาพที่จะโพสจนกว่าจะกดปุ่ม preview นะครับ

วิธีโพสภาพลงในโพสแรกของกระทู้อย่างง่าย

ขั้นตอนที่ 1

ไปที่ด้านล่างของกล่องข้อความ หัวข้อ File Attachments ครับ เมื่อคลิ๊กเข้าไปจะมีช่องให้ upload ภาพเข้าระบบ

file-attch-1_0.jpg

คลิ๊ก Browse.. เพื่อเลือก upload ภาพที่ต้องการ จากนั้นกด Attach เพื่อส่งไฟล์เข้าระบบ

ขั้นตอนที่ 2

เมื่อ upload ไฟล์ภาพเข้าระบบแล้ว เราจะเห็นไฟล์ภาพที่เรา upload แล้วแสดงขึ้นมาในรายการ พร้อมทั้งมี url ของภาพนั้น ๆ ที่ด้านล่างของชื่อภาพอีกด้วย

file-attch-2.jpg
1.ให้ติ๊กช่อง List (บริเวณวงกลมที่เห็นในภาพ)ออก
2.copy url ด้านล่างของภาพเก็บเอาไว้

ขั้นตอนที่ 3

ที่ตัวช่วยพิมพ์ ให้เลือกปุ่มแทรกภาพ (ด้านซ้ายสุด)

file-attch-3.jpg

จากนั้นนำ url ของภาพที่เรา copy มาใส่ลงไป จากนั้นกด OK

file-attch-4.jpg
จากนั้นในกล่องข้อความ เราจะเห็น code ของภาพเราแสดงขึ้นมาครับ (จากภาพประกอบ ส่วนที่ hi-light สีฟ้าเอาไว้ครับ)

file-attch-5.jpg

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

การแทรกภาพลงใน Comment

สำหรับการแทรกภาพลงในส่วน Comment เท่านั้นนะครับ ..ถ้าต้องการแทรกภาพลงในโพสปรกติ ให้ดูที่ link นี้ครับ http://macmuemai.com/content/805
------------------------------
ที่ด้านล่างของแต่ละกล่อง comment จะเห็นหัวข้อ File Attachments อยู่ ให้คลิ๊กเลือก
Choose File เพื่อเลือกไฟล์จากในเครื่องและเลือก Attach เพื่อทำการ upload ภาพที่ต้องการ
comment-w-pc-1.png
note :

  1. ภาพควรจะขนาดกว้างไม่เกิน 550px และขนาดไม่เกิน 120KB ต่อภาพ
  2. ภาพที่ถูก upload เข้าไปจะแสดงอยู่ด้านล่างของข้อความใน comment เสมอ ตามรูปด้านล่างนี้ครับ =)

comment-w-pic.jpg

การใส่สีให้ข้อความ

เวปนี้รองรับการใส่สีแบบ BB Code ครับ ซึ่ง BB Code นี้จะคล้าย ๆ HTML tag ทั่วไป แต่จะสั้นกว่า และใช้ง่ายกว่า มีรูปแบบการใช้งานดังนี้

note : เวลาใช้จริงไม่มี "จุด" ระหว่างตัว c กับตัว o นะครับ

ใส่ [c.olor=สีที่เราต้องการ] ลงก่อนหน้าข้อความ และ [/c.olor] ปิดท้ายข้อความครับ ... แบบนี้

[c.olor=red] ข้อความที่เราต้องการ [/c.olor]

ตัวอย่าง
sample-bluetxt.png
จะได้ = ข้อความนี้สีน้ำเงิน

เราสามารถแทนที่สีด้วยคำภาษาอังกฤษบ้าน ๆ ธรรมดาเช่นพวก Red, Darkred, blue, darkblue, pink, green ... หรือจะเจาะจงเป็นสีแบบ hex code เช่น #AA0011 ก็ได้ครับ =)

การทำข้อความให้เป็น Link ไปยัง URL ที่กำหนด

ตามปรกติ ถ้าเราพิมพ์ URL ลงไปตรง ๆ ระบบจะทำการเปลี่ยนเป็น Link ให้โดยอัตโนมัติครับ เช่น

พิมพ์ว่า www.macmuemai.com
จะได้
www.macmuemai.com

แต่ถ้าเราต้องการจะทำข้อความให้เป็น link ไปยัง URL ที่ต้องการให้ทำดังนี้

  • เลือก hi-light ตัวข้อความที่เราต้องการจะสร้าง link
  • คลิ๊กเลือกปุ่ม URL (icon ที่สองนับจากซ้ายมือ)
  • จากนั้นใส่ URL ที่เราต้องการลงไปในกล่องบรรทัดแรก
  • กด OK

sample-url.jpg
เราจะได้ ข้อความที่เป็น link ไปยัง URL ที่ต้องการแล้วครับ
note :

  1. เวลา preview ด้วยปุ่มรูปลูกตา จะไม่แสดง URL ที่คลิ๊กได้นะครับ แต่จะเห็นเมื่อกด save ข้อความเข้าระบบแล้ว
  2. URL ที่ใช้ได้ จะต้องมี http:// นำหน้าเสมอ

การ quote ข้อความ

การ quote ข้อความหรือการยกข้อความของโพสอื่นมาเพื่ออ้างอิง สามารถทำได้ตามขั้นตอนที่ผมอธิบายเอาไว้ใน link นี้นะครับ

http://macmuemai.com/forum/topic/817#comment-4484