Scriptdd.com

บทความบ้าบ่นของคนทำเว็บ ปี 8

FCKeditor โมเพิ่มปุ่มลบรูป

บทความนี้ได้เขียนไว้นานกว่าปีแล้ว ปัจจุบันมี Script ที่สามารถจัดการเรื่อง File manager ให้กับ FCKeditor ได้ดีกว่า
ชื่อว่า CKFinder สามารถอ่านรายละเอียดได้ที่นี่ ครับ

CKFinder File Manager แบบ Ajax

บทความนี้ทำไว้สำหรับท่านที่ใช้ FCKeditor แล้วมีปัญหาว่า
รูปภาพที่ Upload ขึ้นไปนั้น ไม่สามารถลบทิ้งได้

คือ FCK ไม่มีปุ่มลบรูปให้นั้นแหล่ะ

คราวนี้เป็นหน้าที่ของเราที่ต้องทำเพิ่มเองครับ

อันดับแรกโมดิฟาย Source เดิม

ว่าแล้วไปที่ File

FCKeditor/editor/filemanager/browser/default/frmresourceslist.html

File นี้จะเป็น File ที่จัดการแสดงผล List File ต่างๆออกมา
โดยอาศัย Javascript ทำงานแบบ AJAX ดึง File ออกมาแสดงผล

หากพิจารณาตาม Code แล้ว

oCell.innerHTML = ' ' + fileSize + ' KB' ;

คือจุดที่เราจะโมดิฟายแน่ๆครับ

ผมจึงเปลี่ยนใหม่เป็นดังนี้

oCell.innerHTML = ' ' + fileSize + ' KB <a href="javascript:delfile(\''+fileUrl+'\');" onMouseover="stat_write(\'\');return true;" onMouseout="stat_write(\'\');return true;"><img src="images/icons/cut.gif" hspace="0" vspace="1" border="0" align="absmiddle" alt="ลบ File นี้ทิ้ง" ></a>';

คือเพิ่ม Link ให้คลิกเรียก Function delfile เข้าไปโดย สิ่งที่ส่งเข้าไปลบคือ
URL ของ File ตรงๆเลย

แน่นอนว่าเราต้องเขียน delfile ขึ้นมาใช้เองจากเดิมที่มันทำงานเป็น AJAX
ผมเลยโม Javascript ขึ้นมาใหม่เป็นแบบนี้

xmlhttp.js

function newXmlHttp(){
var xmlhttp = false;

try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
xmlhttp = false;
}
}

if(!xmlhttp && document.createElement){
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}

function delfileajax(id){
// กำหนด Path File php ที่จะใช้ลบให้ถูกต้อง
var url = "../../../../../../diary/file_delete.php?id="+id;
xmlhttp = newXmlHttp();
xmlhttp.open("GET", url, false);
xmlhttp.send(null);
returntext = xmlhttp.responseText;

}

function delfile(id) {
if (window.confirm("คุณแน่ใจที่จะลบ File นี้ ?")) {
delfileajax(id);
window.parent.frames['frmResourcesList'].Refresh();
}
}

แล้วนำไปประกอบเข้า frmresourcelist.html เดิม

สรุปคือ frmresourcelist.html จะมี Function ลบ File เพิ่มขึ้นมา
โดยปุ่มที่ใช้ลบ จะเรียก function delfile ที่จะส่งค่า path เต็มของ File นั้นไปให้ลบ กับ Function
delfileajax ซึ่งจะทำงานผ่าน AJAX ส่งค่าเข้าไปลบ กับ PHP บน Server คือ file_delete.php นั้นเอง
โดยเมื่อลบ file เสร็จแล้ว Function delfile จะทำการเรียก Frame ให้ refresh หน้า list file อีกครั้ง
ก็จะทำให้เราเห็นว่า File ได้ถูกลบไปแล้ว

file_delete.php ผมไม่เขียนให้นะครับ :P ลองไปโมกันเอาเอง

ตัวอย่างหน้า List ที่ผมเพิ่มไอคอน ลบรูปเข้าไป

ข้อควรระวัง

1. การส่ง path ในรูปแบบดังกล่าว ไม่ปลอดภัยด้วยเหตุผลทั้งปวง
ฉะนั้น File file_delete.php คุณต้อง Check สิทธิ การใช้งานให้ดีๆ (หากเชื่อใจ user ก็ไม่ว่ากัน)

2. เช็ค id ที่ส่งมาให้ดีๆ อีกครั้ง เพราะถ้า user เล่นตลกส่ง id ประหลาดๆ
เพื่อแอบลบหน้าหลักของ web ของคุณก็มีโอกาสเป็นไปได้

3. อ่านทวนอีกครั้งก่อนลงมือปฎิบัติ

จบข่าว มีอะไรถามได้นะเคอะ
เล่นสั้นๆเวลามีน้อย งานเยอะคร๊าบ ^^

รูปคุณ Read (8,048) Comments (7) 2006-04-18 23:24:29

ความคิดเห็น

Code delete เขียนยังงัยครับผม

รูปคุณ BB โดยคุณ BB 2007-05-28 14:22:34

"ขอบคุณมากเลยครับสำหรับบทความนี้" และยังมี "comment ข้อควรระวัง" ไว้ให้ด้วย เพราะต้องเช็ค ID และ User ด้วย ยิ่ง user นี่ก็สำคัญครับถ้าหากรู้ path ของไฟล์ frmresourceslist.html ก็สามารถเข้ามาจัดการไฟล์ได้เลย ดังนั้นจะต้องเพิ่มโค้ดเพื่อดัก Permission ตรงส่วน frmresourceslist.html และ file_delete.php นี้ด้วย

ขอบคุณอีกครั้งครับ.(^ o ^)

รูปคุณ TaTump โดยคุณ TaTump 2007-08-15 15:52:50

Script ไอเดีย ทิป เทคนิคต่างๆ สำหรับงานพัฒนาเว็บไซต์ทั้ง Design และ Programming
MEMO8 TOOL Kits

เอามาแบ่งปันกันค่ะ

http://www.bram.us/2006/10/18/my-tinymce-file-management-part-2-tinyfck-with-delete-option/

ลองทำตามแล้ว work เลยเอามาแบ่งกันดูค่ะ

รูปคุณ phenchi โดยคุณ phenchi 2007-10-01 00:49:39

ขอบคุณครับ อิอิ