วิธีติดตั้งส่วนอับโหลดไฟล์ของ OpenWysiwyg

วิธีติดตั้ง OpenLinkLibrary (แปล)

เครดิต: http://www.gallagherwebsitedesign.com/scripts/openwysiwyg-file-upload-addon/

(version 1.0)

ส่วนเสริมสำหรับอับโหลดไฟล์ของ OpenWYSIWYG editor

ก่อนอื่นต้องขอขอบคุณที่คุณดาวน์โหลดโปรแกรมเสริมสำหรับ openWYSIWYG editor. หากคุณจะสนุกสคริปต์นี้โปรดพิจารณาการเรียกดูและใช้งานสคริปต์อื่น ๆ ของเราและที่เราได้สร้างขึ้นโดยการเยี่ยมชมเว็บไซต์ของเราได้ที่www.GallagherWebsiteDesign.com.

1.               เพื่อที่จะใช้งาน ก่อนอื่นคุณต้องดาวน์โหลดและติดตั้ง openWYSIWYG editor ก่อน. โดยคลิกที่นี่เพื่อดาวน์โหลด เวอร์ชั่นล่าสุดของ openWYSIWYG. คุณต้องมีเวอร์ชั่นล่าสุด 1.4.7 เพื่อติดตั้ง addon.

2.               จากนั้นดาวน์โหลด openLinkLibrary เป็นไฟล์ zip และแตกมันออกมา. จากนั้นแตกมันออกมาได้โฟลเดอร์ชื่อ linklibrary แล้วอับโหลดไปเก็บไว้ที่โฟลเดอร์ addon ของ openWYSIWYG บนโฟลเดอร์ของคุณ.

3.               เปิดไฟล์ \scripts\wysiwyg.js ด้วยโปรแกรม texteditor เช่น editplus, notepad++ เป็นไฟล์ของ openWYSIWYG editor (อยู่ในโฟลเดอร์ scripts). เพิ่มโค้ดดังต่อไปนี้ยังด้านล่างสุดของไฟล์ (คุณจะต้องไม่แทรกโค้ดเหล่านี้บนบรรทัดแรก):

var mysettings = new WYSIWYG.Settings();
// define the location of the openLinkLibrary addon
mysettings.LinkPopupFile = "addons/linklibrary/insert_hyperlink.php";
// define the width of the insert link popup
mysettings.LinkPopupWidth = 600;
// define the height of the insert link popup
mysettings.LinkPopupHeight = 245;

4.               ดูให้แน่ใจว่าบรรทัดอยู่ในโค้ดข้างต้น mysettings.LinkPopupFile เป็นการเชื่อมโยงตำแหน่งของส่วนเสริมม openLinkLibrary ที่ติดตั้งเข้าไป. และคุณสามารถเปลี่ยนหน้าต่างป๊อบอับจากโค้ดที่แทรกนี้ด้วย.

5.               จากนั้นในไฟล์ wysiwyg.js แทนที่โค้ดเหล่านี้ (ประมาณบรรทัดที่ 519)ด้วยโค้ดใหม่. เหล่านี้เป็นส่วนประกอบที่รอส่วนเสริม ดังนั้นเพื่อติดตั้งส่วนเริมจึงต้องแทนที่ด้วยโค้ดใหม่ของเรา

 แทนที่ข้อความ:
// set the attributes
WYSIWYG_Core.setAttribute(lin, "href", href);
WYSIWYG_Core.setAttribute(lin, "class", styleClass);
WYSIWYG_Core.setAttribute(lin, "className", styleClass);
WYSIWYG_Core.setAttribute(lin, "target", target);
WYSIWYG_Core.setAttribute(lin, "name", name);
WYSIWYG_Core.setAttribute(lin, "style", style);
ด้วยข้อความ:
// set the attributes
WYSIWYG_Core.setAttribute(lin, "href", href);
if(styleClass) { WYSIWYG_Core.setAttribute(lin, "class", styleClass); }
//WYSIWYG_Core.setAttribute(lin, "className", styleClass);
if(target) { WYSIWYG_Core.setAttribute(lin, "target", target); }
if(name) { WYSIWYG_Core.setAttribute(lin, "name", name); }
if(style) { WYSIWYG_Core.setAttribute(lin, "style", style); }

6.               จากนั้นในไฟล์ wysiwyg.js เพิ่มบรรทัดเหล่านี้ที่บรรทัด 1105 (จะต้องอยู่หลังจากโค้ดสำหรับแทรกภาพป๊อบอับ insert image popup implementation):

// Check the insert link popup implementation
var linkPopupFile = this.config[n].PopupsDir + 'insert_hyperlink.html';
var linkPopupWidth = 350;
var linkPopupHeight = 160;
if(typeof this.config[n].LinkPopupFile != "undefined" && this.config[n].LinkPopupFile != "") {
linkPopupFile = this.config[n].LinkPopupFile;
}
if(typeof this.config[n].LinkPopupWidth && this.config[n].LinkPopupWidth > 0) {
linkPopupWidth = this.config[n].LinkPopupWidth;
}
if(typeof this.config[n].LinkPopupHeight && this.config[n].LinkPopupHeight > 0) {
linkPopupHeight = this.config[n].LinkPopupHeight;
}

7.               จากนั้นในไฟล์ wysiwyg.js แทนที่โค้ดเหล่านี้ประมาณบรรทัดที่ 1159:

 // Create Link
case "CreateLink":
window.open(this.config[n].PopupsDir + 'insert_hyperlink.html?wysiwyg=' + n, 'popup', 'location=0,status=0,scrollbars=0,resizable=0,width=350,height=160,top=' + popupPosition.top + ',left=' + popupPosition.left).focus();
break;
ด้วยโค้ด:
// Create Link
case "CreateLink":
window.open(linkPopupFile + '?wysiwyg=' + n, 'popup', 'location=0,status=0,scrollbars=0,resizable=0,width=' + linkPopupWidth + ',height=' + linkPopupHeight + ',top=' + popupPosition.top + ',left=' + popupPosition.left).focus();
break;

8.               เสร็จแล้ว. ในเว็บเพจคุณที่มี wysiwyg editor อยู่แล้ว แทนที่โค้ด java

เดิม:

WYSIWYG.attach('textarea_id'); เช่น WYSIWYG.attach('textarea1');

ด้วยโค้ด:

WYSIWYG.attach('textarea_id', mysettings); เช่น WYSIWYG.attach('textarea1', mysettings);

ดูให้แน่ใจว่าได้แทนที่ textarea_id ในโค้ดข้างต้นด้วยโค้ด textarea id แล้ว

9.               เสร็จแล้ว.เปิดในไฟล์ config.inc.php ในโฟลเดอร์ linklibrary (ส่วนเสริมที่ดาวน์โหลดไป) เปลี่ยยนตำแหน่งโฟลเดอร์สำหรับอับโหลด. $linkbasedir = '../../uploads';
ด้วย
$linkbaseurl = 'wysiwyg/uploads';

10.         การเพิ่มโค้ดสำหรับอับโหลดภาพ (เพิ่มเติม) นำโค้ดเหล่านี้ไปไว้ล่างสุดของไฟล์ หลังสุดของส่วน
var mysettings = new WYSIWYG.Settings(); // define the location of the openImageLibrary addon
ด้วยโค้ด
mysettings.ImagePopupFile = "addons/imagelibrary/insert_image.php";
// define the width of the insert image popup
mysettings.ImagePopupWidth = 600;
// define the height of the insert image popup
mysettings.ImagePopupHeight = 245;

พูดให้เข้าใจง่าย ๆ ก็คือ ในข้อ 3. ต้องเขียนโค้ดให้เต็มแบบนี้:
var mysettings = new WYSIWYG.Settings(); // define the location of the openImageLibrary addon
mysettings.LinkPopupFile = "addons/linklibrary/insert_hyperlink.php"; // define the width of the insert link popup
mysettings.LinkPopupWidth = 600; // define the height of the insert link popup
mysettings.LinkPopupHeight = 300; 
  
 mysettings.ImagePopupFile = "addons/imagelibrary/insert_image.php"; // define the width of the insert image popup
mysettings.ImagePopupWidth = 600; // define the height of the insert image popup
mysettings.ImagePopupHeight = 300;