อย่างแรกทำการ download FCKEditor จาก http://www.fckeditor.net/
จากนั้นทำการ download พระเอกของเรา jQuery จาก http://www.jquery.com/
ขั้นต่อไปทำการ unzip และนำ file ที่ได้ไปไว้ใน folder js (ของคุณจะตั้งเป็นอะไรก็แล้วแต่ แต่ของผม js) จากนั้นทำการลบ file ของ fckeditor ที่ไม่จำเป็นออก หรือถ้าหากไม่แน่ใจว่า file ไหนใช้บ้างไม่ใช้บ้าง ก็เอาไว้ทั้งหมดนั้นหละครับ ไม่เป็นไรไม่ต้องลบออกก็ได้ แต่มันก็จะดูรกๆ ไปหน่อย ไม่ค่อยงามนัก ซึ่งเราชอบแต่ของงามๆ (ไปอ่านต่อข้างใน)
โครงสร้างของ folder ต่างๆ ที่ผมใช้
1 2 3 4 | - /js/jquery-1.3.2.js - /js/jquery.start.js - /fckeditor/ - /example.html |
- ต่อไปสร้าง file jquery.start.js ใน folder js โดยมีข้อมูลดังนี้
1 2 3 4 5 6 7 8 9 10 11 12 13 | // Start $(document).ready(function(){ // FCKeditor $("textarea.FCKeditor").each(function(){ var oFCKeditor = new FCKeditor(this.name); oFCKeditor.BasePath = 'fckeditor/' ; oFCKeditor.Config['SkinPath'] = 'skins/office2003/'; oFCKeditor.Width = '820'; oFCKeditor.Height = '500px'; oFCKeditor.ReplaceTextarea() ; }); } ); |
จาก code จะเห็นว่ามีการ loop หา textarea ที่มี class ชื่อ FCKeditor เพื่อทำการ replace เป็น FCKEditor และกำหนด properties ต่างๆของ FCKEditor ที่ file นี้ด้วย
- จากนั้นสร้าง file example.html โดยมีข้อมูลดังนี้
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery + CSS + FCKeditor</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="fckeditor/fckeditor.js"></script> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript" src="js/jquery.start.js"></script> </head> <body> <form action="" method="post" name="form1" id="form1"> Title : <br /> <input name="textfield" type="text" id="textfield" size="80" /> <br /> <br /> Editor : <br /> <textarea name="message" cols="50" rows="10" id="message" class="FCKeditor"></textarea> <br /> <br /> <input type="submit" name="button" id="button" value="Submit" /> </form> </body> </html> |
จากตัวอย่างของ HTML นี้จะเห็นได้ว่า input ที่เป็น textarea ได้มีการเพิ่ม class ชือ FCKeditor เข้าไปด้วย เพื่อทำการ replace textarea ตัวนี้ให้เป็น FCKEditor
หากดูแล้วยัง งง ก็ download ตัวอย่างที่ผมทำไว้ไปดูก่อนก็ได้นะครับ น่าจะเข้าใจง่ายขึ้น
http://www.unzeen.com/download/jquery-css-fckeditor.zip
ต่อไปเวลาที่เราต้องการใช้งาน FCKEditor ไม่ว่าจะต้องการกีตัวๆในหน้านั้นๆ เราก็เพียงเพิ่ม class FCKeditor เข้าไปใน textarea ที่ต้องการเท่านั้น เพียงเท่านี้ ชีวิตก็ง่ายขึ้น (หรือเปล่าหว่า)
Mr.Khwanchai Kaewyos (LookHin)
