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

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

  1. <script language="javascript" type="text/javascript">
  2. tinyMCE.init({
  3. mode : "textareas",
  4. theme : "advanced",
  5. width : "630",
  6. plugins : "advimage"
  7. });
  8. </script>

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

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

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

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

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

  1. <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/ ขึ้นมา เลื่อนลงมาส่วนท้ายของไฟล์ แล้วนำโค้ด

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

ไปต่อท้าย

  1. showPreviewImage : function(u, st) {
  2. ……….
  3. ……….
  4. }

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

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

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

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

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

  1. window.opener.document.getElementById(’src’).value="image path";
  2. window.opener.ImageDialog.showPreviewImage("image path");
  3. self.close();

เข้าไปไว้ใน event เมื่อผู้ใช้คลิกเลือกรูปภาพ

ขอบคุณ พี่ทอม