วิธีใช้งานตัวช่วยพิมพ์ที่ใช้อยู่ภายในเวปสำหรับแต่งตัวหนังสือ หรือว่าแทรกรูปลงในโพสครับ
ใครเคยเล่นเวปบอร์ดพวกตระกูล phpnuke มาก่อน น่าจะคุ้นเคยกับการพิมพ์และการจัดตัวหนังสือแบบมี html tag ติดคู่ไปกับตัวหนังสือด้วย
ตัวระบบที่ผมใช้นี้ก็ไม่หนีกันมากครับ มีตัวช่วยเสริมมาบ้างนิดหน่อย ตามนี้
1. ปุ่มแทรกรูป
สำหรับแทรกภาพเข้ามาในกล่องข้อความขณะพิมพ์ครับ อธิบายอย่างละเอียดเอาไว้แล้วที่นี่ครับ http://macmuemai.com/content/805
2. ปุ่มแทรก link หรือ URL
เอาไว้สำหรับทำให้ข้อความที่เราต้องการ link ไปยัง URL หน้าเวปที่เรากำหนด วิธีใช้คือ
ผลที่ได้จะเป็นประมาณนี้
ทดสอบการใช้ปุ่ม quote ในกล่องพิมพ์ข้อความ
8-9. ปุ่มใส่ list
ปุ่ม 8 เป็นรายการแบบไล่ลำดับ ส่วนปุ่ม 9 เป็นรายการแบบไม่เจาะจงลำดับครับ แบบนี้
ปุ่มนี้เอาไว้สำหรับตัดเนื้อหาโดยย่อจากเนื้อหาเต็ม ๆ ของเราเพื่อเอาไว้แสดงผลในหน้าอื่น ใครที่เขียน tutorial เข้าเวปนี้คงอาจจะได้ใช้บ้าง แต่ถึงไม่กำหนดตรงนี้ ผมได้ตั้งให้ทางระบบตัดเนื้อหาโดยย่อให้เองแล้วเหมือนกันครับ แต่บางทีระบบจะตัดคำแบบขาด ๆ เกิน ๆ ก็อาจจะต้องมาใช้ปุ่มนี้ช่วยกำหนดการตัดตอนให้เป็นไปตามที่ควรจะเป็นครับ
11. ปุ่ม Preview
ปุ่มแสดงผลของตัวข้อความเราที่พิมพ์ไปใส่ html tag ไป ถ้าใครอยากจะทราบว่าหน้าตาพอ save แล้วจะออกมาประมาณไหน ก็กดปุ่มนี้ดูก่อนคร่าว ๆ ได้นะครับ หรือจะกดปุ่ม Preview ที่อยู่ด้านล่างของหน้าเวปก็ได้ ให้ผลเหมือนกัน แต่กดจากปุ่มลูกตา (Preview) นี้จะแสดงผลได้เร็วกว่า เพราะไม่ต้องโหลดหน้าเวปใหม่เหมือนปุ่ม Preview ด้านล่างครับ
12. ปุ่น Help
เป็นชื่อรวมของทุกปุ่มว่ามีชื่อว่าอะไรบ้าง สำหรับคนที่ยังไม่คุ้น และอาจจะลืมว่าแต่ละปุ่มเอาไว้ทำอะไรนะครับ เอาไว้ดูเตือนได้จากตรงนี้
หมดแล้วครับ หวังว่าคงช่วยให้ใช้งานพิมพ์ได้สะดวกมากขึ้นนะครับ =)
ที่เราต้องทำคือทำการ upload ภาพเข้ามาในกระทู้ผ่านตัวช่วยพิมพ์แบบใหม่ (อ่านการใช้งานตัวช่วยพิมพ์แบบใหม่บนเวปแบบอื่น ๆ ได้ที่นี่ครับ http://macmuemai.com/content/806)
การแทรกภาพในกระทู้
ในหน้าพิมพ์กระทู้ปรกติ
ขั้นตอนที่ 1. คลิ๊กปุ่ม Insert/edit image (อันซ้ายมือสุด)
ขั้นตอนที่ 2. เลือก Browse จากนั้นจะมีหน้าต่างใหม่แสดง Pop up ขึ้นมา ให้ทำตามขั้นตอนด้านล่างนี้ไปเรื่อย ๆ นะครับ (สำหรับผู้ใช้ Safari ที่ block pop up windows เอาไว้ เค้าจะเปิดหน้าเวป เป็น Tab ใหม่ขึ้นมาครับ)
note : ถ้าเราต้องการแทรกภาพจาก URL ที่เรามี (link ภาพมาจากเวปฝากภาพหรือเวปอื่น) ให้นำ URL ของภาพนั้นมาแป่ะในช่อง Image URL แล้วกด OK ได้เลย .. ส่วนถ้าใครต้องการส่งภาพเข้าระบบของแมคมือใหม่โดยตรง ให้ทำตามขั้นตอนที่เหลือด้านล่างนี้นะครับ..
ขั้นตอนที่ 3. คลิ๊กปุ่ม Upload เพื่อแสดงช่องสำหรับ upload ไฟล์เข้าระบบครับ
ขั้นตอนที่ 4. ทำการเลือกไฟล์ภาพที่ต้องการ
ขั้นตอนที่ 5. คลิ๊ก Upload เพื่อส่งไฟล์ภาพเข้าระบบ
ขั้นตอนที่ 6. เมื่อไฟล์ภาพถูก upload เข้าระบบแล้ว เราจะเห็นแสดงอยู่ในรายการทางด้านขวา และแสดงภาพ preview ในด้านล่าง (ถ้าต้องการ upload ภาพมากกว่า 1 ภาพ สามารถทำซ้ำขั้นตอนที่ 4-5 ใหม่ได้เรื่อย ๆ จากตรงนี้ครับ)
ขั้นตอนที่ 7. เมื่อ upload ภาพทุกอย่างเรียบร้อยแล้ว คลิ๊ก Send to Bueditor เพื่อส่งภาพที่เราเลือกเอาไว้นี้ กลับไปยังตัวช่วยพิมพ์ในตอนแรก (สำหรับผู้ใช้ Safari เมื่อคลิ๊กแล้ว เค้าจะเหมือนไม่มีอะไรเกิดขึ้น ให้กลับมาดูใน Tab ที่แล้วครับ)
ขั้นตอนที่ 8. จากนั้นคลิ๊ก OK
ขั้นตอนที่ 9. เราจะกลับมาที่หน้าเวปตอนพิมพ์ปรกติเราจะเห็นว่า มี code ของไฟล์ภาพที่เราต้องการแป่ะอยู่ในกล่องข้อความของเราแล้ว ให้คลิ๊กปุ่ม Preview (รูปลูกตาที่ลูกศรชี้ไว้ในภาพ) เพื่อเป็นการ preview โพสของเราโดยที่ไม่ต้อง refresh หน้าจอใหม่ เราจะเห็นแบบนี้ครับ
จากนั้น ถ้าใครต้องการจะแทรกภาพตรงไหน ก็ให้ทำซ้ำแบบเดิมจาก 1-8 ครับ (ไม่จำเป็นต้อง Preview ทุกครั้งก็ได้)
ถ้าทุกอย่างเป็นไปตามที่ต้องการแล้ว ที่ด้านล่าง คลิ๊กปุ่ม Submit เพื่อเป็นการยืนยันส่งกระทู้เข้า Forum ครับ
note : ควรจะตั้งชื่อไฟล์ใหม่ด้วยทุกครั้ง เพื่อเป็นการหลีกเลี่ยงชื่อไฟล์ซ้ำซ้อนในระบบ และทำให้ภาพหายครับ
วิธีโพสภาพลงในโพสแรกของกระทู้อย่างง่าย
ขั้นตอนที่ 1
ไปที่ด้านล่างของกล่องข้อความ หัวข้อ File Attachments ครับ เมื่อคลิ๊กเข้าไปจะมีช่องให้ upload ภาพเข้าระบบ
คลิ๊ก Browse.. เพื่อเลือก upload ภาพที่ต้องการ จากนั้นกด Attach เพื่อส่งไฟล์เข้าระบบ
ขั้นตอนที่ 2
เมื่อ upload ไฟล์ภาพเข้าระบบแล้ว เราจะเห็นไฟล์ภาพที่เรา upload แล้วแสดงขึ้นมาในรายการ พร้อมทั้งมี url ของภาพนั้น ๆ ที่ด้านล่างของชื่อภาพอีกด้วย
1.ให้ติ๊กช่อง List (บริเวณวงกลมที่เห็นในภาพ)ออก
2.copy url ด้านล่างของภาพเก็บเอาไว้
ขั้นตอนที่ 3
ที่ตัวช่วยพิมพ์ ให้เลือกปุ่มแทรกภาพ (ด้านซ้ายสุด)
จากนั้นนำ url ของภาพที่เรา copy มาใส่ลงไป จากนั้นกด OK
จากนั้นในกล่องข้อความ เราจะเห็น code ของภาพเราแสดงขึ้นมาครับ (จากภาพประกอบ ส่วนที่ hi-light สีฟ้าเอาไว้ครับ)
เมื่อเสร็จตรงนี้แล้ว ให้ลองกดปุ่ม Preview โพสดูนะครับ ถ้าไม่มีอะไรผิดพลาด เราจะเห็นภาพของเราขึ้นมาแล้ว
สำหรับการแทรกภาพลงในส่วน Comment เท่านั้นนะครับ ..ถ้าต้องการแทรกภาพลงในโพสปรกติ ให้ดูที่ link นี้ครับ http://macmuemai.com/content/805
------------------------------
ที่ด้านล่างของแต่ละกล่อง comment จะเห็นหัวข้อ File Attachments อยู่ ให้คลิ๊กเลือก Choose File เพื่อเลือกไฟล์จากในเครื่องและเลือก Attach เพื่อทำการ upload ภาพที่ต้องการ
note :
เวปนี้รองรับการใส่สีแบบ BB Code ครับ ซึ่ง BB Code นี้จะคล้าย ๆ HTML tag ทั่วไป แต่จะสั้นกว่า และใช้ง่ายกว่า มีรูปแบบการใช้งานดังนี้
note : เวลาใช้จริงไม่มี "จุด" ระหว่างตัว c กับตัว o นะครับ
ใส่ [c.olor=สีที่เราต้องการ] ลงก่อนหน้าข้อความ และ [/c.olor] ปิดท้ายข้อความครับ ... แบบนี้
[c.olor=red] ข้อความที่เราต้องการ [/c.olor]
ตัวอย่าง
จะได้ = ข้อความนี้สีน้ำเงิน
เราสามารถแทนที่สีด้วยคำภาษาอังกฤษบ้าน ๆ ธรรมดาเช่นพวก Red, Darkred, blue, darkblue, pink, green ... หรือจะเจาะจงเป็นสีแบบ hex code เช่น #AA0011 ก็ได้ครับ =)
ตามปรกติ ถ้าเราพิมพ์ URL ลงไปตรง ๆ ระบบจะทำการเปลี่ยนเป็น Link ให้โดยอัตโนมัติครับ เช่น
พิมพ์ว่า www.macmuemai.com
จะได้
www.macmuemai.com
แต่ถ้าเราต้องการจะทำข้อความให้เป็น link ไปยัง URL ที่ต้องการให้ทำดังนี้
เราจะได้ ข้อความที่เป็น link ไปยัง URL ที่ต้องการแล้วครับ
note :
การ quote ข้อความหรือการยกข้อความของโพสอื่นมาเพื่ออ้างอิง สามารถทำได้ตามขั้นตอนที่ผมอธิบายเอาไว้ใน link นี้นะครับ