(((Web Dev No.1))) การใช้งาน CKEditor+CKFinder สามารถอัพโหลดไฟล์ได้

[nistelbooy]

วันนี้(ไม่)ว่าง เบื่อๆ เซ็งๆ เลยมานั่งเขียนบทความให้เพื่อนๆชาวไทยเสียวที่ กำลังหัดทำเว็บนะครับ ถูกใจก็  1 ครับ อิอิ

CKEditor คืออะไร หาดูได้จาก (รายละเอียด และดาวน์โหลดเวอร์ชั่นใหม่ได้ที่นี่)

hxxp://ckeditor.com

CKFinder คืออะไร หาดูได้จาก (รายละเอียด และดาวน์โหลดเวอร์ชั่นใหม่ได้ที่นี่)

hxxp://ckfinder.com

เริ่มกันเลยครับ

นี่คือหน้าตาของ CKEditor





นี่คือหน้าตาของ CKFinder





วิธีติดตั้งและใช้งาน

1. ดาวน์โหลดไฟล์ทั้ง ckeditor และ ckfinder แตกไฟล์ออกมาจะได้โครงสร้างโฟลเดอร์เป็นแบบนี้นะครับ

สมมุติผมใช้ Appserv

C:Appserv/www/website/ckeditor  // โฟลเดอร์ของ ckeditor
C:Appserv/www/website/ckfinder  // โฟลเดอร์ของ ckfinder
C:Appserv/www/website/userfiles  // โฟลเดอร์เก็บไฟล์ที่อัพโหลด พวกรูปภาพ ไฟล์ต่างๆ
C:Appserv/www/website/example.php // ไฟล์ตัวอย่าง

2. สร้างไฟล์ขึ้นมาหนึ่งไฟล์ สำหรับทดสอบ ในที่นี้ผมใช้ชื่อไฟล์ว่า example.php แล้วใส่โค้ดตามตัวอย่างข้างล่างนี้

* ตั้งค่า path ให้ถูกต้องด้วยนะครับ

โค้ดที่อยู่ภายใน head

โค้ด เลือก ขยาย


<script type="text/javascript" src="ckeditor/ckeditor.js"></script>


โค้ดที่อยู่ภายใน body

โค้ด เลือก ขยาย


<textarea cols="80" id="message" name="message" rows="10"></textarea>
<script type="text/javascript">
//<![CDATA[
  CKEDITOR.replace( 'message',{
language : 'en',
height : 400,
       width : 500,
filebrowserBrowseUrl : '/website/ckfinder/ckfinder.html',
filebrowserImageBrowseUrl : '/website/ckfinder/ckfinder.html?Type=Images',
filebrowserFlashBrowseUrl : '/website/ckfinder/ckfinder.html?Type=Flash',
filebrowserUploadUrl : '/website/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
filebrowserImageUploadUrl : '/website/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',
filebrowserFlashUploadUrl : '/website/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash'
} );
//]]>
</script>


สามารถดาวน์โหลดตัวอย่างได้ที่นี่

Download Source File


กดบวก หน้าตาดีกันทุกคน

ขอบคุณครับ

*************
บทความทั้งหมด

(((Web Dev No.1))) การใช้งาน CKEditor CKFinder สามารถอัพโหลดไฟล์ได้
(((Web Dev No.2))) การใช้ jquery ui เพื่อทำ slider ย่อ-ขยาย font ในหน้าเว็บเพจ
(((Web Dev No.3))) การสร้างไฟล์ sitemap ที่ถูกต้องสำหรับ search engine ต่างๆ
วิธีทำ SEO Friendly URL สำหรับ SMF Forum (แบบ manual ง่ายๆ)
แจกโค้ด php อย่างง่ายๆ ครับ เอาไปประยุกต์ใช้งานได้ รอบที่ 1
แจกโค้ด PHP แสดงบอทมาเก็บข้อมูล... เก็บลง textfile

*************

[rtee]

ผมดาวน์โหลดเวอร์ชั่นล่าสุดมาทั้ง ckeditor และ ckfinder แต่เวลารันแล้ว มันไม่ขึ้นปุ่ม Browse Server มาให้อ่ะครับ ต้องแก้ไขยังไงบ้างครับ ?