วิธีติดตั้ง FCKeditor ให้ใช้ระบบ อัพโหลดรูปภาพ ได้บน CodeIgniter


สวัสดีทุกท่านครับ สำหรับคนทำเว็บแล้วคงจะหลีกเลี่ยงการใช้งาน text editor ไม่ได้ คนทำเว็บเองก็ต้องใช้ text editor ในการเขียนบทความต่างๆ เพื่อโพสขึ้นไปยังเว็บของท่าน วันนี้ผมจึงมาแนะนำ text editor ตัวหนึ่งที่ชื่อ FCKeditor ซึ่ง text editor ตัวนี้ก็มีมานานแล้วล่ะครับ แต่ก่อนเป็นที่นิยมกันมาก แต่ปัจจุบันจำนวนผู้ใช้ก็ลดน้อยลงเพราะมี text editor ใหม่ๆ เกิดขึ้นมาก และทางผู้พัฒนาก็ได้พัฒนาอีกรุ่นที่ชื่อ CKeditor ขึ้นมา และก็ล้มเลิกการพัฒนาตัว FCKeditor ไป แต่ถ้าพูดถึงประโยชน์การใช้งานแล้ว ตัว FCKeditor ก็ยังใช้งานได้ดีอยู่ในระดับหนึ่ง ถึงแม้หน้าตาของมันจะเทียบไม่ได้เลยกับรุ่นน้องอย่าง CKeditor แต่ความสามารถของมันก็ยังรองรับความต้องการใช้งานของเราได้ครบเลยทีเดียว และความสามารถของมันที่โดดเด่นก็คือระบบอัพโหลดและจัดการรูปภาพ ที่ติดมาพร้อมในตัวของมัน ทำให้เราไม่ต้องสร้างระบบ อัพโหลดรูปภาพ แยกต่างหาก เพิ่มความสะดวกสบายมาอีกระดับหนึ่ง text editor ตัวนี้จึงผมจึงนิยมใช้มันอยู่บ่อยๆ ส่วนตัวรุ่นน้องอย่าง CKeditor เองก็สามารถติดตั้งระบบอัพโหลดรูปภาพได้ แต่ต้องใช้คู่กับ CKfinder ซึ่งตัวนี้เอง ผู้ใช้ต้องมี LicenseKey ถึงจะใช้งานระบบอัพโหลดได้ พอดีรับงานทำเว็บลูกค้ามา เลยนึกขึ้นได้ว่า ผมเคยโมตัว FCKeditor ใว้ใช้งานกับ CodeIgniter ใว้ก่อนแล้ว เลยเอาโค้ดมา ตัดส่วนอื่นๆ ที่ไม่จำเป็นออก ปรับแต่งโค้ดบางส่วนใหม่ เพิ่มประสิทธิภาพและความเร็วนิดหน่อย วันนี้จึงได้มาแนะนำ วิธีติดตั้ง และ นำไฟล์มาให้ได้ ดาวน์โหลด กัน

fckeditor,text editor,อัพโหลดรูปภาพ

ดาวน์โหลด FCKeditor ที่ผมปรับแต่งไว้แล้ว

รายละเอียดการปรับแต่ง

  • ตัดโค้นภาษาอื่นออกหมด ให้เหลือแต่ภาษา PHP
  • ตัดโค้ดฟังชั่นบางส่วน ใน PHP ออก
  • ลดขนาดไฟล์ Javascript
  • ลดขนาดไฟล์ Css
  • แก้ไขให้เวลาเรียก path รูปภาพเป็นแบบ Full Path
ดาวน์โหลดได้ที่
http://codeigniter.in.th/downloads/codes/fckeditor.rar

วิธีการติดตั้ง FCKeditor

ดาวน์โหลดไฟล์ และแตกไฟล์ใว้รวมกับ CodeIgniter เหมือนในภาพ (สมมุตว่าเราต้องการวางใว้ตรงนี้)

เรียกไฟล์ ที่ส่วนหัวก่อน
<script type="text/javascript" src="<?php echo base_url(); ?>fckeditor/fckeditor.js"></script>
ตรงส่วนที่จะให้เป็น text editor ตั้งชื่อว่า detail แล้วใส่โค้ดตามนี้
<textarea name="detail" id="detail"></textarea>
<script type="text/javascript">
var oFCKeditor = new FCKeditor( 'detail' ) ;
oFCKeditor.BasePath = '<?php echo base_url(); ?>fckeditor/';
//oFCKeditor.Height = 300;
oFCKeditor.ReplaceTextarea() ;
</script>
ส่วนการตั้งค่า PHP เข้าไปที่ fckeditor/editor/filemanager/connectors/php/config.php เปลี่ยนค่าตัวแปร $Config['WebBasePath'] เป็น Full Path ในการเรียกใช้ไฟล์ ส่วน $Config['UserFilesPath'] ตั้งเป็นค่าตำแหน่ง root path ที่จะให้ script วางไฟล์ลงไป
$Config['WebBasePath'] = 'http://localhost/codeigniter/storage/';
$Config['UserFilesPath'] = '../../../../../storage/' ;
อย่าลืม Chmod 0777 ที่ Folder ใช้เก็บรูปด้วยนะครับ
คราวนี้เวลาเราเขียนบทความ ก็ไม่ต้องลำบากเวลาแทรกรูปภาพอีกต่อไปแล้ว ขอให้ทุกท่านมีความสุขกับการทำเว็บนะครับ

หากมีปัญหาหรือข้อสอบถาม ไปคุยกันได้ในบอร์ดตามที่อยู่ลิ้งนี้
คุณกันได้ที่นี่