มาปรับแต่ง CKEditor ให้โดนใจกันเถอะ ตอนที่ 3 ปรับแต่งรูปสื่ออารมณ์


บทความคราวนี้เป็นเรื่องที่สามของบทความชุด “มาปรับแต่ง CKEditor ให้โดนใจกันเถอะ” แล้วนะครับ สำหรับคราวนี้เราจะมาปรับแต่งรูปสื่ออารมณ์กันครับ

รูปสื่ออารมณ์ (Emoticon หรือ Smiley)
คือรูปภาพที่ถูกนำมาใช้แสดงแทนอารมณ์ของคนเรา อย่างที่ทราบกันดีว่า “ภาพเพียงหนึ่งภาพนั้นสามารถแทนถ้อยคำได้เป็นพันคำ” ดังนั้น การสื่อสารด้วยรูปสื่ออารมณ์จึงมีส่วนช่วยให้ผู้อ่านสามารถเข้าใจถึงความรู้สึกของผู้เขียนได้โดยง่าย ช่วยให้เกิด “ความรู้สึกร่วม” ในการอ่านข้อเขียนนั้นๆ

สำหรับ CKEditor เองก็มีความสามารถที่จะให้เราหรือผู้ใช้งาน “แทรก” รูปสื่ออารมณ์ลงไปในเอกสารหรือสิ่งพิมพ์ของเราได้ แต่ว่ารูปสื่ออารมณ์ที่มากับ CKEditor นั้นมันช่าง… ไม่งาม ในความรู้สึกผมนะครับ ดังนั้นผมก็จะแก้ไขเจ้ารูปสื่ออารมณ์จากหัวกลมๆสีเหลืองธรรมดาๆ (ดูรูป) เป็นอะไรอย่างอื่นที่ดูดีมีชาติตระกูลขึ้นมานิดนึง

CKEditor_3-Emoticon_Original
โครงสร้างของไดเร็กทอรี่ที่เกี่ยวข้อง
ไดเร็กทอรี่ที่เก็บรูปสื่ออารมณ์ของ CKEditor จะอยู่ในไดเร็กทอรี่ images ซึ่งอยู่ในลำดับชั้นที่สาม (นับจาก ckeditor)
[WebApplicationRootDirectory]
+ [App_Data]
. . .
+ [ckeditor]
+ [images]
+ [lang]
+ [plugins]
+ [a11yhelp]
. . .
+ [smiley]
+ [dialogs]
– smiley.js    <– จาวาสคริปต์ (เข้าใจว่า) สำหรับการแสดงหน้า popup ให้เลือก smiley
+ [images]      <– ไดเร็กทอรี่ที่เก็บรูปสื่ออารมณ์
+ [skins]
+ [themes]
. . .

การแก้ไขรูปสื่ออารมณ์
เมื่อเรารู้ที่เก็บรูปสื่ออารมณ์แล้วเราก็เริ่มแก้ไขรูปได้เลย วิธีแรก ง่ายๆ ค่อนข้างจะเกรียนนิดนึงครับ คือหารูปไอคอนที่เราชอบ มาบันทึกทับรูปเดิมเข้าไป ไม่ต้องแก้ไขโค้ดอะไรทั้งสิ้น เพียงแต่รู้ชื่อไฟล์รูปเท่านั้น (ไฟล์รูปดั้งเดิม มี 21 ไฟล์ดังต่อไปนี้ครับ angel_smile.gif, angry_smile.gif, broken_heart.gif, confused_smile.gif, cry_smile.gif, devil_smile.gif, embaressed_smile.gif, envelope.gif, heart.gif, kiss.gif, lightbulb.gif, omg_smile.gif, regular_smile.gif, sad_smile.gif, shades_smile.gif, teeth_smile.gif, thumbs_down.gif, thumbs_up.gif, tounge_smile.gif, whatchutalkingabout_smile.gif และ wink_smile.gif) แต่วิธีนี้ ถ้าไม่แบ็คอัพรูปไว้รูปต้นฉบับเดิมก็จะหายหมดนะครับ

วิธีที่ 2 วิธีนี้ค่อนข้างง่ายครับ เพราะเราเพียงแค่ปรับแต่งใน config.js เท่านั้นเอง ซึ่งสำหรับการแก้ไขหรือปรับแต่งรูปสื่ออารมณ์นั้นเราจะต้องยุ่งเกี่ยวกับตัวแปร 3 ตัว คือ smiley_path, smiley_images และ smiley_descriptions โดยที่ตัวแปร smiley_path นั้นเป็นตัวแปรที่ระบุ path หรือไดเร็กทอรี่ที่เก็บไฟล์รูปภาพสื่ออารมณ์ครับ เช่น หากเราเก็บชุดรูปสื่ออารมณ์ไว้ภายใต้ไดเร็กทอรี่ [drive]:[website]ckeditorpluginssmileymysmiley เราก็ระบุเพียงแค่ “ckeditor/plugins/smiley/mysmiley/” เท่านั้นครับ หรืออาจจะระบุแบบเต็มเลยก็ได้ เช่น “http://www.mysite.com/ckeditor/plugins/smiley/mysmiley/&#8221; ส่วน smiley_images เป็นตัวแปรอาเรย์ที่เก็บรายชื่อไฟล์รูปสื่ออารมณ์ และ smiley_descriptions เป็นตัวแปรอาเรย์ที่เก็บคำอธิบายของรูปสื่ออารมณ์แต่ละรูปซึ่งเราจะเห็นเมื่อเราเลื่อนเมาส์ไปบนรูปสื่ออารมณ์นั้น ๆ ครับ เอาล่ะครับ มาเริ่มกันเลย

  1. จัดหารูปภาพสื่ออารมณ์ หรือจะสร้างเองก็ได้ครับ แต่ตัวผมเองค่อนข้างจะยอมรับอย่างหน้าบานตาชื่นว่า ฝีมือการใช้งานโปรแกรมตกแต่งภาพ และฝีมือการออกแบบนี่อยู่ในระดับอเวจีเลย จึงขออนุญาตใช้รูปที่มีอยู่แล้วและหาดาวน์โหลดได้ทั่วไปจากในเน็ตก็แล้วกัน นะครับ ซึ่งผมจะนำมาใช้ 2 ชุด คือชุดไอคอนหัวหอม และชุดลิงครับ
  2. เมื่อได้ชุดรูปสื่ออารมณ์มาแล้ว ก็สร้างที่อยู่ให้มันใหม่ ภายใต้ ckeditor/plugins/smiley เช่น ckeditor/plugins/smiley/onion สำหรับชุดหัวหอม และ ckeditor/plugins/smiley/monkey สำหรับชุดลิง
  3. แก้ไขไฟล์ config.js ดังตัวอย่างข้างล่างนี้
    CKEDITOR.editorConfig = function(config) {
    .
    .
    .
    // Custom emoticon/smiley (Onion Set)
    config.smiley_path = ‘Scripts/plugins/smiley/onion/’;
    config.smiley_images = [‘onion_angry.gif’, ‘onion_blush.gif’, ‘onion_cheeky.gif’, ‘onion_cheer.gif’, ‘onion_cool.gif’, ‘onion_crying.gif’,
    ‘onion_dead.gif’, ‘onion_enlightened.gif’, ‘onion_frown.gif’, ‘onion_give_me.gif’, ‘onion_heart.gif’, ‘onion_heart_broken.gif’,
    ‘onion_indecision.gif’, ‘onion_laugh.gif’, ‘onion_not_care.gif’, ‘onion_sad.gif’, ‘onion_sigh.gif’,
    ‘onion_smile.gif’, ‘onion_smoking.gif’, ‘onion_surprise.gif’, ‘onion_thankful.gif’, ‘onion_vomit.gif’];
    config.smiley_descriptions = [‘Angry’, ‘Blush’, ‘Cheeky’, ‘Cheer’, ‘Cool’, ‘Crying’, ‘Dead’, ‘Enlightened’, ‘Frown’, ‘Give Me’, ‘Heart’,
    ‘Heart Broken’, ‘Indecision’, ‘Laugh’, ‘Not Care’, ‘Sad’, ‘Sigh’, ‘Smile’, ‘Smoking’, ‘Surprise’, ‘Thankful’, ‘Vomit’];
    };
    จากนั้นบันทึกไฟล์ config.js ก็เป็นอันเสร็จเรียบร้อยแล้วครับ เท่านี้เราก็จะได้ชุดรูปสื่ออารมณ์อย่างที่เราต้องการนอกเหนือจากที่ CKEditor เตรียมไว้ให้แล้ว และเราก็สามารถนำรูปสื่ออารมณ์นี้มาแทรกไว้ในเอกสารของเราได้ แต่เนื่องจากตัวแปรที่เกี่ยวกับรูปสื่ออารมณ์นี้ ไม่ได้ถูกแยกเป็นชุด ๆ เหมือนกับชุดแถบเครื่องมือ (ซึ่งเราเพิ่มและเรียกใช้โดยระบุชื่อชุดได้) ดังนั้นทุก ๆ ครั้งที่เราสร้าง instance ของ editor เราจะได้ชุดรูปสื่ออารมณ์แบบเดียวกันเสมอไปนะครับ

เอาล่ะครับมาดูผลงานกันสักหน่อยครับ

CKEditor_3-Modified_1
CKEditor กับ รูปสื่ออารมณ์ชุดหัวหอม
CKEditor_3-Modified_2
CKEditor กับ รูปสื่ออารมณ์ชุดลิง

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

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

อ่านบทความย้อนหลัง
มาปรับแต่ง CKEditor ให้โดนใจกันเถอะ ตอนที่ 1 เริ่มต้นใช้งาน
มาปรับแต่ง CKEditor ให้โดนใจกันเถอะ ตอนที่ 2 ปรับแต่งแถบเครื่องมือ

3 comments

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s