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


ไม่พูดพล่ามทำเพลงล่ะครับ มาต่อกันเลย

การปรับแต่งสีพื้นหลัง
เราสามารถปรับแต่งการแสดงผลของ editor เช่นสีพื้นหลังหรือรูปแบบตัวอักษรได้ แต่ในตัวอย่างนี้ผมจะแสดงการปรับแต่งสีพื้นของ skin “v2” จากสีเดิมที่ดูเหมือนสีกากีตุ่น ๆ เป็นสีฟ้าสดใสนะครับ

ในการควบคุมการแสดงผลของ editor นั้น มี style sheet ที่เกี่ยวข้อง อยู่ 2 ไฟล์ คือ editor.css สำหรับควบคุมการแสดงผลของ editor บนบราวเซอร์ และ dialog.css สำหรับการควบคุมการแสดงผลของ dialog box / popup window ต่าง ๆ สำหรับการปรับแต่งสีพื้นของกรอบของ editor จากสีกากีตุ่น ๆ มาเป็นสีฟ้าสดใสนั้น ผมจะแก้ที่ editor.css โดยมองหา สไตล์คลาส .cke_skin_v2 .cke_top, .cke_skin_v2 .cke_bottom, .cke_shared .cke_skin_v2 ซึ่งเป็นคลาสที่กำหนดสีพื้นหลังของกรอบ คลาส .cke_skin_v2 .cke_button a, .cke_skin_v2 .cke_button a.cke_off ซึ่งกำหนดสีพื้นหลังของปุ่มเครื่องมือ และคลาส .cke_skin_v2 .cke_button a, .cke_skin_v2 .cke_button a:hover, .cke_skin_v2 .cke_button a:focus, .cke_skin_v2 .cke_button a:active, .cke_skin_v2 .cke_button a.cke_off ซึ่งกำหนดสีของเส้นขอบของปุ่มเครื่องมือ โดยทำการแก้ไข ดังนี้ครับ
editor.css
.
.
.
.cke_skin_v2 .cke_top, .cke_skin_v2 .cke_bottom, .cke_shared .cke_skin_v2 {
background-color: #f0f8ff;
}
.cke_skin_v2 .cke_button a, .cke_skin_v2 .cke_button a.cke_off {
background-color: #0ff8ff;
filter: alpha(opacity=70);
opacity: .70;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.cke_skin_v2 .cke_button a, .cke_skin_v2 .cke_button a:hover, .cke_skin_v2 .cke_button a:focus, .cke_skin_v2 .cke_button a:active, .cke_skin_v2 .cke_button a.cke_off {
border: solid 1px #f0f8ff;
display: inline-block;
border-radius: 3px;
.
.
.
}

มาดูผลการแก้ไขกันครับ

CKEditor_4_skin_v2_original
ก่อนการปรับแต่ง

CKEditor_4_skin_custom
หลังการปรับแต่ง

ทั้งหมดนี้คือการปรับแต่งสีพื้นหลังของ editor ครับ แต่ว่าสไตล์คลาสหลัก ๆ ทั้งสามส่วนนี้ เพียงเป็นส่วนที่ควบคุมการแสดงผลส่วนใหญ่เท่านั้นครับ ยังมีสไตล์คลาสที่ควบคุมการแสดงผลส่วนอื่น ๆ อยู่อีก ซึ่งหากแนะนำหมดในที่นี้คงจะยาวมาก ๆ จึงขออนุญาตละไว้นะครับ หากเพื่อน ๆ หรือผู้อ่านท่านใด ต้องการปรับแต่งในระดับละเอียดกว่านี้ สามารถเข้าไปแก้ไขในในไฟล์ editor.css และ dialog.css ได้ครับ

อนึ่ง สำหรับ skin “kama” นั้น เราไม่จำเป็นจะต้องแก้ไขไฟล์ style sheet ใด ๆ เลย หากต้องการเปลี่ยนสีพื้นหลัง เนื่องจาก skin ใหม่นี้ มีการเพิ่มความสามารถใหม่ ๆ เข้าไป (skin.js, ckeditor.js) ทำให้เราสามารถกำหนดสีพื้นหลังได้ ด้วยการกำหนดสีพื้นหลังที่ต้องการในขณะที่สร้าง instance ของ editor ได้เลย หรือกำหนดไว้ในไฟล์ config.js ก็ได้ครับ

ตัวอย่าง (การกำหนดสีพื้นหลังที่ต้องการในขณะที่สร้าง instance ของ editor)
<asp:TextBox runat="server" ID="txbEditor1" Width="500" Height="200" TextMode="MultiLine" />
<script type="text/javascript" language="javascript">
CKEDITOR.replace('txbEditor1', {
uiColor: '#F0F8FF',
skin: 'kama',
toolbar: 'Custom'
});

</script>

ตัวอย่าง (การกำหนดรูปแบบการแสดงผลที่ต้องการไว้ในไฟล์ config.js)
CKEDITOR.editorConfig = function(config) {
config.skin = 'kama';
config.uiColor = '#F0F8FF';
config.toolbar = 'Custom'
};

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

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

One comment

ใส่ความเห็น

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