วิธีติดตั้ง OpenLinkLibrary (แปล)
(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;
// 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); }
// 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;
}
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;
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';
ด้วย
$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;
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;
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;