วิธีใช้ป๊อปอัป“ เพิ่มลิงก์” สำหรับวิดเจ็ต WordPress

ในโปรแกรมแก้ไขแบบ WYSIWYG ของ WordPress คุณจะได้รับป๊อปอัปหากคุณต้องการเพิ่มลิงค์สำหรับข้อความ มีความเป็นไปได้ในการเข้าถึงฟังก์ชั่นนี้หรือไม่? เนื่องจากฉันต้องการใช้ป๊อปอัปนี้สำหรับวิดเจ็ต WordPress ที่ฉันสร้างขึ้นเพื่อให้คุณสามารถเพิ่มลิงก์ไปยังวิดเจ็ตหากคุณกำหนดค่าไว้ในแบ็กเอนด์

นี่คือภาพหน้าจอของสิ่งที่ฉันหมายถึง:

ฉันพยายามสักเล็กน้อยและไม่สามารถทำให้สิ่งนี้ทำงานได้อย่างสมบูรณ์แบบ แต่มันใกล้จะยากที่จะขยายออกไป<form>สำหรับสไตล์ป๊อปอัปที่เป็นฮาร์ดโค้ดคิดว่าเป็นไปได้ที่จะมีงานมากขึ้น

ในการเริ่มต้นคุณสามารถ:

จัดทำจาวาสคริปต์และสไตล์ของป๊อปอัปลิงก์ไฟล์wp-includes/wplink.js. js หลักคือ ขึ้นอยู่กับตำแหน่งที่คุณโหลดสิ่งนี้คุณอาจจำเป็นต้องเพิ่มสคริปต์ / สไตล์ให้มากขึ้นหรือน้อยลงเพราะมันต้องอาศัยหลายอย่าง ( thickbox, jQuery-ui, ui-dialog ฯลฯ )

wp_enqueue_script('wplink');
wp_enqueue_script('wpdialogs-popup'); //also might need this

// need these styles
wp_enqueue_style('wp-jquery-ui-dialog');
wp_enqueue_style('thickbox');

ตั้งค่าตัวแปรที่แปลได้:

var wpLinkL10n = {"title":"Insert\/edit link","update":"Update","save":"Add Link","noTitle":"(no title)","noMatchesFound":"No matches found."};

ตอนนี้คุณควรจะสามารถขยายwpLinkฟังก์ชั่นการใช้งานเช่น:

// test button
<button class="link-btn">Click button for Links</button>

jQuery('.link-btn').on('click', function(event) {
  wpActiveEditor = true;
  wpLink.title = "Hello"; //Custom title example
  wpLink.open();    // Open the link popup
  return false;
});

คุณต้องการ<form>องค์ประกอบสำหรับป๊อปอัปซึ่งการกำหนดค่าเริ่มต้นเป็นระยะเวลานานในการวางที่นี่คุณสามารถดูค่าเริ่มต้นที่นี่: https://gist.github.com/wycks/6402573

ขณะนี้มีปัญหาสำคัญกับสิ่งนี้คือฉันไม่ได้เพิ่ม javascript ที่ปิดหรือส่ง (หรือตรวจสอบ) ใด ๆ ในฟังก์ชันเช่นwpLink.closeหรือwpLink.textareaเพื่อดูwplink.jsข้อมูลเพิ่มเติม

ขออภัยที่ต้องใช้เวลานานในการเล่นซอถ้าฉันไม่มีอะไรพื้นฐาน แต่ควรทำให้คุณได้รับประโยชน์มากที่สุด