मेटाबॉक्स में वर्डप्रेस लिंक सम्मिलित संवाद का प्रयोग करें?

Question

मैं अक्सर कस्टम मेटाबोक्स का उपयोग करता हूं। अक्सर मेरे पास एक चयापचय में एक "लिंक" फ़ील्ड होगा। मैं बस एक साधारण पाठ इनपुट फ़ील्ड का उपयोग कर रहा हूं, लेकिन मैं यह समझने की कोशिश कर रहा हूं कि एक बटन को कैसे रखा जाए जो वर्डप्रेस कंटेंट एडिटर का उपयोग करने वाले "सम्मिलित लिंक" संवाद को कॉल करेगा। क्या यह संभव है?

Answer 1

वर्डप्रेस संपादक संपादक के रूप में tinyMCE का उपयोग करता है। एक पोस्ट से संबंधित कस्टम फ़ील्ड्स, एक विशेष चलने योग्य बॉक्स में प्रस्तुत किए जाते हैं और एक पोस्ट के the documentation that creates the edition box स्पष्ट रूप से बताते हैं कि एक बार WYSIWYG संपादक जोड़ा जाता है, इसे DOM के चारों ओर स्थानांतरित नहीं किया जा सकता है, इसलिए इसे उन प्रकारों में जोड़ा नहीं जा सकता बक्से का

इसका मतलब यह है कि यदि आप जिस प्रकार की कार्यक्षमता को ढूंढ रहे हैं उसे जोड़ना चाहते हैं तो आपको शायद उस स्क्रीन को हाथ में ट्रेसिंग करके पूरी चीज को फिर से कार्यान्वित करना होगा।

Answer 2

आप आवश्यक जेएस को पहली बार संलग्न करके लिंक बॉक्स का आह्वान कर सकते हैं और फिर wp-link js फ़ाइलों के तरीकों से बातचीत कर सकते हैं।

सुनिश्चित करें कि आप कतारबद्ध है WP-लिंक

1/wp_enqueue_script('wp-link');

2/अपने ui सेट अप करें। मैं आमतौर पर लिंक यूआरएल को संभालने के लिए लिंक संवाद और टेक्स्टफील्ड को आमंत्रित करने के लिए एक बटन का उपयोग करता हूं।

3/आह्वान लिंक संवाद

$('body').on('click', '.link-btn', function(event) { 
      wpActiveEditor = true; //we need to override this var as the link dialogue is expecting an actual wp_editor instance 
      wpLink.open(); //open the link popup 
      return false; 
     }); 

4/हैंडल लिंक

$('body').on('click', '#wp-link-submit', function(event) { 
      var linkAtts = wpLink.getAttrs();//the links attributes (href, target) are stored in an object, which can be access via wpLink.getAttrs() 
      $('your_url_textfield').val(linkAtts.href);//get the href attribute and add to a textfield, or use as you see fit 
      wpLink.textarea = $('body'); //to close the link dialogue, it is again expecting an wp_editor instance, so you need to give it something to set focus back to. In this case, I'm using body, but the textfield with the URL would be fine 
      wpLink.close();//close the dialogue 
//trap any events 
      event.preventDefault ? event.preventDefault() : event.returnValue = false; 
      event.stopPropagation(); 
      return false; 
     }); 

5/हैंडल लिंक रद्द करता है यह

$('body').on('click', '#wp-link-cancel, #wp-link-close', function(event) { 
     wpLink.textarea = $('body'); 
     wpLink.close(); 
     event.preventDefault ? event.preventDefault() : event.returnValue = false; 
     event.stopPropagation(); 
     return false; 
    }); 

करना चाहिए के बारे में बचत होती है। मैं अपने मेटाबॉक्स क्लास में एक ही दृष्टिकोण का उपयोग करता हूं और ऐसा लगता है कि यह ठीक काम करता है। एक हैक का अबाउट, क्योंकि मैं लिंक संवाद के एचटीएमएल तत्वों के संदर्भ में हार्डकोडिंग कर रहा हूं। संवाद को बाहरी एपीआई की आवश्यकता है। शायद WP में जोड़ने के लिए मुश्किल नहीं है।