มาปรับแต่ง CKEditor ให้โดนใจกันเถอะ ตอนที่ 4 ปรับแต่งสีพื้นหลังและรูปภาพไอคอนของปุ่มเครื่องมือบนแถบเครื่องมือ (1)


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

โครงสร้างของไดเร็กทอรี่ที่เกี่ยวข้อง
ไดเร็กทอรี่ที่เก็บ skin ต่าง ๆ ของ CKEditor นั้นจะอยู่ภายใต้ไดเร็กทอรี่ “skins” โดยจะตั้งชื่อไดเร็กทอรี่ตามชื่อของ skin นั้นๆ เช่น ไดเร็กทอรี่ “kama” สำหรับเก็บไฟล์ต่าง ๆ ของ skin ที่ชื่อ “kama” เป็นต้น เรามาดูโครงสร้างของไดเร็กทอรี่ที่เก็บไฟล์ skin ต่าง ๆ กันครับ
[WebApplicationRootDirectory]
+ [App_Data]
. . .
+ [ckeditor]
. . .
+ [skins]
+ [kama]
+ [images]
-  dialog.css   <– style sheet ของ dialog box
-  editor.css   <– style sheet ของ editor
-  icons.png   <– รูปภาพไอคอนของปุ่มเครื่องมือบนแถบเครื่องมือ
-  skin.js
-  templates.css
+ [office2003]
. . .
+ [v2]
. . .
. . .

จะเห็นได้ว่า CKEditor นั้น ได้เตรียม skin มาให้เราใช้ถึง 3 แบบ คือ v2, office2003 ซึ่งทั้งสองแบบนี้มีอยู่ใน CKEditor รุ่นเก่าด้วย (หมายถึง FCKEditor นะครับ) และที่เพิ่มมาใหม่คือ skin ที่ชื่อ “kama” ซึ่งทางผู้พัฒนาได้เพิ่มขีดความสามารถของ skin ตัวนี้โดยการเรียกใช้ plugins ได้อีกด้วย

ตัวอย่างการเรียกใช้ CKEditor โดยระบุชื่อ skin
<script type="text/javascript" language="javascript"> CKEDITOR.replace('txbEditor1', { skin: 'v2' }); </script>

ตัวอย่าง skin ต่าง ๆ ที่ มีอยู่ใน CKEditor

CKEditor_4_skin_v2
การแสดงผล CKEditor ด้วย skin “v2″
CKEditor_4_skin_office2003
การแสดงผล CKEditor ด้วย skin “office2003″
CKEditor_4_skin_kama
การแสดงผล CKEditor ด้วย skin “kama”

การปรับแต่งรูปภาพไอคอนของปุ่มเครื่องมือบนแถบเครื่องมือ
รูปภาพไอคอนของปุ่มเครื่องมือนั้นถูกเก็บอยู่ในไฟล์ที่ชื่อ icons.png ภายใต้ไดเร็กทอรี่ของ skin นั้น ๆ ไฟล์ icons.png นี้ มีขนาด 16 x 1215 pixel เป็นไฟล์ที่เก็บรวบรวมรูปภาพไอคอนของปุ่มเครื่องมือทั้งหมดไว้ในตัวมันเองเพียงไฟล์เดียว ซึ่งจะสามารถเก็บรูปภาพไอคอน ขนาด 16 x 16 pixel ได้ประมาณ 75 ภาพ และด้วยเทคนิค “CSS Sprite” ทำให้เราสามารถแสดงผลรูปภาพไอคอนของแต่ละปุ่มเครื่องมือแยกกันได้ (ซึ่งการใช้เทคนิค “CSS Sprite” นี้จะช่วยลดปริมาณของการเกิด HTTP Request สำหรับการโหลดรูปภาพลง จาก 63 ครั้งสำหรับแถบเครื่องมือแบบ full เหลือเพียง 1 ครั้ง ซึ่งจะช่วยให้หน้าเว็บถูกโหลดได้เร็วขึ้น — ผู้เขียน)

ในตัวอย่างนี้ผมจะปรับแต่งรูปภาพไอคอนของปุ่มเครื่องมือ ‘Image’, ‘Flash’, ‘Smiley’ และ ‘SpecialChar’ เพียงสี่ปุ่ม พอให้ได้เห็นเป็นแนวทางเท่านั้นนะครับ ซึ่งในการแก้ไขไฟล์ icons.png นั้นคุณจะเลือกใช้โปรแกรมตกแต่งภาพอะไรก็ได้ตามแต่ถนัดครับ ส่วนในตัวอย่างนี้ ผมใช้ GIMP ซึ่งเป็นโปรแกรมโอเพ่นซอร์สที่ใช้สำหรับการตกแต่งรูปภาพ
CKEditor_4_toolbar_icons_modfiy
รูปภาพแสดงการแก้ไขรูปภาพไอคอนของปุ่มเครื่องมือ ‘Image’, ‘Flash’, ‘Smiley’ และ ‘SpecialChar’

CKEditor_4_toolbar_custom
รูปภาพแสดงผลการทดสอบหลังจากการแก้ไขรูปภาพไอคอนสำหรับปุ่มเครื่องมือ ‘Image’, ‘Flash’, ‘Smiley’ และ ‘SpecialChar’ แล้ว

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

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

 

About these ads

ใส่ความเห็น

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