วิธีนำ filemanager ของเรามาใช้กับ TinyMCE

อยู่ในประเภท: Programming |

โพสเมื่อ November 10th, 2008 โดย Bird

ขั้นตอนที่ 1:

ในการตั้งค่าการใช้งาน TinyMCE ให้เปิดใช้ plugin ที่ชื่อว่า advimage ดังนี้

<script language="javascript" type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "advanced",
width : "630",
plugins : "advimage"
});
</script>

ขั้นตอนที่ 2 :

เข้าไปเพิ่มปุ่ม browse ในหน้าต่าง insert/edit image

โดยการเข้าไปแก้โค้ด plugin advimage “image.js” ซึ่งอยู่ใน plugins/advimage/js/
เสิร์ชหาคำว่า “srcbrowsercontainer” ในไฟล์ image.js จะเจอ

<td id="srcbrowsercontainer"> </td>

ให้แทนที่   ด้วยโค้ดปุ่ม browse

<a href="javascript:void(0);" onclick="ImageDialog.popupWindows();"> <img src="img/browse.gif" title="browse" alt="browse" style="border: 0;" /></a>

เพิ่มรูป browse

ไว้ใน plugins/advimage/img/

ขั้นตอนที่ 3 :

เปิดไฟล์ image.js ซึ่งอยู่ใน plugins/advimage/js/ ขึ้นมา เลื่อนลงมาส่วนท้ายของไฟล์ แล้วนำโค้ด

,popupWindows : function(){
window.open(‘filemanager path’, ”, ’status=0,toolbar=0,location=0,directories=0,menubar=0,scrollbars=0,copyhistory=0,resizable=0′);
}

ไปต่อท้าย

showPreviewImage : function(u, st) {
……….
……….
}

filemanager path คือ path ที่ชี้ไปยัง file manager

เมื่อทำตามขั้นตอนทั้งหมดแล้วให้ลองรันดู ในหน้าต่าง insert/edit image จะมีปุ่ม browse ดังรูป

เมื่อกดปุ่ม browse จะมีหน้าต่าง popup เด้งขึ้นมา ซึ่งเป็น filemanager ที่เราได้กำหนดไว้ใน filemanager path นั่นเอง

ขั้นตอนที่ 4 :

ในโปรแกรม file manager ของเรา เมื่อคลิกเลือกรูปภาพแล้ว path ของรูปภาพที่เลือกจะต้องปรากฏอยู่ในช่อง Image URL และรูปภาพ Preview จะต้องปรากฏขึ้น ในหน้าต่าง insert/edit image ทำได้โดยการ ใส่โค้ด