อัพโหลดรูปด้วย ckeditor และเก็บ path ลงฐานข้อมูล

<h3>อัพโหลดรูปด้วย ckeditor และเก็บ path ลงฐานข้อมูล<&sol;h3>&NewLine;<p>&NewLine;<strong>อัพโหลดรูปด้วย ckeditor และเก็บ path ลงฐานข้อมูล<&sol;strong><br &sol;>&NewLine;CKEditor คือโปรแกรมออกแบบเนื้อหาและคำสั่งแสดงผลบนหน้าเว็บในลักษณะ WYSIWYG HTML editor ที่ได้รับความนิยมในการนำมาพัฒนาเว็บไซต์โดยเฉพาะส่วนของระบบจัดการหลังบ้านหรือ Backend ด้วยเหตุผลที่ว่า มีความครบถ้วนสมบูรณ์ในการปรับแต่งเนื้อหาที่หลากหลาย มีระบบ add-ons ปรับเพิ่มความสามารถของโปรแกรมได้ หรือเลือกที่จะติดตั้งใช้งานเฉพาะส่วนที่จำเป็น<&excl;--more--><&sol;p>&NewLine;<p>สำหรับเว็บไซต์ การอัพโหลดไฟล์รูปภาพเข้าไปในเนื้อหา สำหรับตัวโปรแกรมสามารถทำได้ผ่าน add-ons image โดยมีวิธีติดตั้งง่าย ๆ ดังนี้<br &sol;>&NewLine;<&sol;br><&sol;p>&NewLine;<h4>ติดตั้ง add-ons ที่จำเป็น<&sol;h4>&NewLine;<ul>&NewLine;<li>1&period; ไปที่หน้าเว็บไซต์หลักของ ckeditor&period;com เลือกไปที่เมนู download และเลือก <a href&equals;"http&colon;&sol;&sol;ckeditor&period;com&sol;builder" target&equals;"&lowbar;blank">Online Builder<&sol;a><&sol;li>&NewLine;<li>2&period; เพิ่ม plugins เฉพาะที่เราจำเป็นจะใช้งาน สำหรับ plugins ที่จำเป็นสำหรับการอัพโหลดรูปภาพจะใช้แค่ 2 ส่วนคือ<br &sol;>&NewLine;image และ popup ให้ทำการติดตั้งเข้าไปด้วย<br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;<img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2017&sol;01&sol;อัพโหลดรูป-ckeditor-1&period;png" alt&equals;"อัพโหลดรูป-ckeditor" &sol;><br &sol;>&NewLine;<&sol;br>&NewLine;<&sol;li>&NewLine;<li>3&period; เสร็จแล้วให้ติ๊กที่ช่อง Agree และกดดาวน์โหลดไฟล์ติดตั้ง ckeditor<&sol;li>&NewLine;<li>4&period; หลังจากดาวน์โหลดเสร็จแล้วให้เปิดไฟล์ config&period;js ขึ้นมาแก้ไขโดยให้เพิ่ม คำสั่งและชี้ path ของไฟล์ php ที่เราต้องการจะส่ง image data เข้าไป&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >CKEDITOR&period;editorConfig &equals; function&lpar; config &rpar; &lbrace; &NewLine;&Tab;config&period;extraPlugins &equals; 'image'&semi; &NewLine;&Tab;config&period;filebrowserUploadUrl &equals; 'http&colon;&sol;&sol;localhost&sol;ckupload&period;php'&semi; &NewLine;&rcub;<&sol;pre>&NewLine;<&sol;li>&NewLine;<li>5&period; เปิดไฟล์ <strong>ckupload&period;php<&sol;strong> ขึ้นมาและเขียนคำสั่งภาษา PHP สำหรับบันทึกรูปภาพลงบนโฮสและรีเทิร์น path ของรูปกลับไปให้ส่วน editor ด้วย javascript โดยสามารถเขียนคำสั่งได้ดังนี้&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " > &NewLine;&dollar;image &equals; 'upload&sol;'&period;time&lpar;&rpar;&period;"&lowbar;"&period;&dollar;&lowbar;FILES&lbrack;'upload'&rsqb;&lbrack;'name'&rsqb;&semi; &sol;&sol; กำหนดชื่อไฟล์ &NewLine;if &lpar;&lpar;&dollar;&lowbar;FILES&lbrack;'upload'&rsqb; &equals;&equals; "none"&rpar; OR &lpar;empty&lpar;&dollar;&lowbar;FILES&lbrack;'upload'&rsqb;&lbrack;'name'&rsqb;&rpar;&rpar;&rpar;&lbrace; &sol;&sol; ตรวจสอบว่ามีข้อมูลถูกส่งมาหรือป่าว &NewLine; &dollar;error &equals; "No file uploaded&period;"&semi; &NewLine;&rcub;else&lbrace; &NewLine; if&lpar;&excl;move&lowbar;uploaded&lowbar;file&lpar;&dollar;&lowbar;FILES&lbrack;'upload'&rsqb;&lbrack;'tmp&lowbar;name'&rsqb;&comma; &dollar;image&rpar;&rpar;&lbrace; &NewLine;&Tab; &dollar;error &equals; "Granted Read&sol;Write&sol;Modify permissions&period;"&semi; &sol;&sol; ตรวจสอบว่าโฟลเด้อที่จะบันทึกรูปสามารถเขียนได้หรือป่าว &NewLine; &rcub; &NewLine;&rcub; &NewLine;&dollar;callBack &equals; &dollar;&lowbar;GET&lbrack;'CKEditorFuncNum'&rsqb; &semi; &sol;&sol; ใช้งาน javascript callback function &NewLine;echo "&lt&semi;script type&equals;'text&sol;javascript'&gt&semi;window&period;parent&period;CKEDITOR&period;tools&period;callFunction&lpar;&dollar;callBack&comma; '&dollar;image'&comma; '&dollar;error'&rpar;&semi;&lt&semi;&sol;script&gt&semi;"&semi;<&sol;pre>&NewLine;<&sol;li>&NewLine;<li>6&period; สร้าง folder สำหรับเก็บรูปที่อัพโหลดตั้งชื่อว่า upload และ chmod 777 วางไว้ในชั้นเดียวกับไฟล์ ckupload&period;php <&sol;li>&NewLine;<&sol;ul>&NewLine;<p>จากขั้นตอนในข้อที่ 5 ที่ไฟล์ <strong>ckupload&period;php<&sol;strong> จะทำให้เราสามารถบันทึกข้อมูลในส่วนที่เป็น path ของรูปคือตัวแปร &dollar;image เข้าไปในฐานข้อมูลได้ ในขณะเดียวกันรูปก็จะถูกส่งออกไปแสดงผลในหน้าของการจัดการด้วยเช่นกัน<&sol;p>&NewLine;