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


ผมเคยได้พบกับคำถามจากเว็บบอร์ดเกรทเฟรนด์สอยู่บ่อยครั้งว่า มี Text Editor อะไรดี ๆ ที่สามารถใช้งานบนเว็บบราวเซอร์ โดยเฉพาะอย่างยิ่งกับหน้าเว็บที่พัฒนาด้วย ASP.NET ได้บ้าง และก็เห็นมีเพื่อน ๆ หลาย ๆ คนมาช่วยให้คำตอบ รวมถึงตัวผมเองด้วย และจนถึงบัดนี้ผมก็ยังคงคิดว่าเจ้า FCKEditor เนี่ยเป็น “Free” WYSIWYG Text Editor ที่ดีตัวหนึ่ง ที่สามารถรันได้บนเว็บบราวเซอร์ยอดนิยมส่วนใหญ่ โดยไม่มีปัญหาจุกจิกกวนใจมากมายเหมือน Editor ตัวอื่นๆ

ผมใช้งานเจ้า FCKEditor ตัวนี้มานานพอสมควรแล้ว และนอกจากจะแค่เอามาใช้แต่เพียงอย่างเดียว ผมได้เคยงัดแงะโค้ด แก้ไขดัดแปลงบางอย่าง แบบที่เขาเรียกกันหรู ๆ ว่า “customize” น่ะแหละครับ แล้วก็เล็ง ๆ ว่าจะเขียนเรื่องการใช้งานเจ้า Text Editor ที่ฟรีแต่เจ๋งตัวนี้ กับ ASP.NET รวมถึงสิ่งที่ผมเคย customize มันด้วย แต่จนแล้วจนรอดก็ยังไม่ได้ลงมือสักที จนมาถึงบัดนี้ FCKEditor ก็ได้ปรับรุ่นไปขนานใหญ่เสียแล้ว นอกจากนี้ยังเปลี่ยนชื่อใหม่เป็น CKEditor เสียอีกด้วย

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

การอนุญาตใช้งาน
CKEditor มีการอนุญาตใช้งาน 2 แบบ คือ Open Source Licence ภายใต้ GPL, LGPL และ MPL สำหรับนำมาใช้งานกับ Open Source Software หรือสำหรับการใช้งานส่วนตัวหรือเพื่อการศึกษา หรือแม้แต่ซอฟแวร์เชิงพาณิชย์ที่ยังไม่สามารถให้การสนับสนุนการพัฒนา CKEditor ได้ และ แบบที่ 2 เป็นการอนุญาตใช้งานในเชิงพาณิชย์ (Commercial License – CKSource Closed Distribution License – CDL) สำหรับบริษัทใดๆที่ไม่มีนโยบายที่จะใช้งานซอฟแวร์ Open Source (อันเนื่องมาจากเงื่อนไขของตัวลิขสิทธิ์เอง–ผู้เขียน) คุณสามารถไปศึกษาเกี่ยวกับการอนุญาตใช้งานได้ที่http://ckeditor.com/license

การนำ CKEditor มาใช้บนหน้าเว็บ ASP.NET
เราสามารถดาวน์โหลด CKEditor ได้จาก http://ckeditor.com/download ครับ ซึ่ง ณ วันที่เขียนบทความนี้นั้นเป็นรุ่น 3.2 ที่เพิ่งออกมาเมื่อ 25 กุมภาพันธ์ 2553 นี่เอง และสิ่งที่เปลี่ยนแปลงสำหรับผมมากที่สุดคือ รุ่นนี้และรุ่นก่อนหน้า (ตั้งแต่รุ่นที่ 3 เป็นต้นมา) จะไม่มีส่วนที่เป็น .NET component อีกแล้ว เหมือนกับว่าทางทีมผู้พัฒนาได้เลิกพัฒนาในส่วนที่เป็น .NET component พร้อม ๆ กับได้เปลี่ยนชื่อเป็น CKEditor นั่นเอง ดังนั้นส่วนที่เป็น .NET component ของ CKEditor นั้นจะหยุดอยู่ที่รุ่น 2.6.3 (FCKEditor 2.6.3) ส่วนรุ่นใหม่ ๆ หลังจากนั้นจะเป็น JavaScript ล้วน ๆ ครับ

เอาล่ะครับ หลังจากที่ดาวน์โหลด CKEditor มาแล้วเราก็แตกออกมาไว้ที่ใดที่หนึ่งในเครื่องเรา แล้วก็มาเริ่มใช้งานกันเลยครับ โดยคัดลอกเฉพาะส่วนที่จำเป็นจากไดเร็กทอรี่ที่เราเก็บ CKEditor ไปไว้ที่ไดเร็กทอรี่รากของ web application ซึ่งเท่าที่ผมลองใช้งาน กับ ASP.NET ส่วนที่จำเป็นต่อการใช้งานและโครงสร้างไดเร็กทอรีมีดังนี้
[WebApplicationRootDirectory]
+ [App_Data]

+ [ckeditor]
+ [images]
+ [lang]               <– เมนูและข้อความช่วยเหลือเป็นภาษาอื่นนอกจากภาษาอังกฤษ
+ [plugins]           <– ปลั๊กอินต่าง ๆ ของ CKEditor
+ [skins]              <– ที่เก็บสกินของ CKEditor ที่มากับชุดโปรแกรมจะมี 3 สกินคือ kama, office2003 และ v2
+ [themes]
ckeditors.js           <– สคริปต์หลักที่ต้องนำไปใช้ในหน้าเว็บ
ckeditor_basic.js
config.js               <– configuration file
เริ่มต้น
1. สร้าง Web Site Project ด้วย Visual Studio 2008
2. เปิดหน้า default.aspx และแทรกจาวาสคริปต์ลงในหน้าเว็บ
<head runat=”server”>

<script src=”ckeditor/ckeditor.js” type=”text/javascript”></script>
</head>
3. สร้าง instance ของ editor
<asp:TextBox runat=”server” ID=”txbEditor1″ Width=”500″ Height=”200″ TextMode=”MultiLine” />
<script type=”text/javascript” language=”javascript”>
CKEDITOR.replace(‘txbEditor1’);
</script>

เพียงเท่านี้ก็เป็นอันเสร็จเรียบร้อยครับ

ผลของการรันหน้าเว็บตัวอย่างบนบราวเซอร์ยอดนิยมครับ

CKEditor_1_Sample_RunIE
IE 8 (8.0.6001.18882)
CKEditor_1_Sample_RunFFMozilla Firefox (3.6.2) CKEditor_1_Sample_RunASApple Safari (4.0.5)
CKEditor_1_Sample_RunOP
Opera (10.10)
CKEditor_1_Sample_RunGC
Google Chrome (4.1.249.1042)
สำหรับการใช้งานในระดับ “ก้าวหน้า” เช่นการใช้งานร่วมกับ jQuery, JavaScript API และอื่นๆ นั้น สามารถดูจากตัวอย่างที่มีมาในชุดโปรแกรมที่ดาวน์โหลดมาได้ครับ ทางผู้พัฒนาได้สร้างหน้าเว็บตัวอย่างในระดับก้าวหน้ามาไว้ให้มากทีเดียว

มีข้อเตือนสำหรับนักพัฒนา ASP.NET สักนิด สำหรับปัญหาน่ากวนใจเพียงเล็กน้อยที่เกิดขึ้นกับเจ้า CKEditor เมื่อทดลองรันครั้งแรก คือ มันจะมีการปะ HTML Tag ให้เราด้วย เมื่อเรา submit จะถูกโวยวายว่า “Server Error in ‘/WebSite1’ Application. —– A potentially dangerous Request.Form value was detected from the client (txbEditor1=”<p>blah blah blah…”).” สังเกตครับว่ามันมีการปะแท็ก “<p>” ข้างหน้าข้อความให้เรา ซึ่ง .NET จะเห็นว่ามันเป็นอันตราย เนื่องจากอาจจะเป็นสคริปต์ที่เขียนขึ้นเพื่อกระทำการอย่างใดอย่างหนึ่งกับข้อมูลของเว็บของเราหรือเว็บอื่นที่เป็นเป้าหมายโดยอาศัยเว็บเราเป็นฐานที่มั่นในการโจมตี ดังนั้นเราจะต้องบอกให้ไม่ต้องทำการตรวจสอบข้อมูลที่ถูกโพสต์จากหน้าเว็บ โดยเพิ่ม attribute ValidateRequest=”false” ลงไปใน Page directive ซึ่งจะเป็นการป้องกันไม่ให้เกิด error นี้ที่เฉพาะหน้าที่มีการใช้งาน CKEditor หรือ อาจจะใส่ไว้ใน web.config ที่ section <page> ดังนี้ครับ <pages validateRequest=”false” /> ซึ่งจะเป็นการบอกว่า ไม่ต้องตรวจสอบข้อมูลที่ถูกโพสต์สำหรับทุกๆหน้า (วิธีหลังนี้ไม่แนะนำครับ เพราะอันตราย) และที่สำคัญคือเมื่อเราบอกให้ไม่ต้องตรวจสอบข้อมูลที่ถูกโพสต์มา เราก็ต้องป้องกันข้อมูลที่ถูกโพสต์เข้ามาด้วยตัวเราเอง โดยใช้ HttpUtility.HtmlEncode ก่อนที่จะบันทึก และใช้ HttpUtility.HtmlDecode ก่อนที่จะนำมาแสดงผล ซึ่งโดยปกติเจ้า CKEditor จะตรวจสอบและแปลงข้อความหรือ Encode ให้เราอยู่แล้วระดับหนึ่ง มีแต่แท็กที่ถูกเพิ่มโดย CKEditor เองเท่านั้นที่ไม่ถูกแปลง

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

5 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