Bagaimana saya bisa menggunakan fungsionalitas "browse tautan" Wordpress bawaan?

Saya sedang mengode widget dan saya ingin pengguna dapat memilih tautan seperti yang Anda bisa saat mengedit posting atau halaman biasa (ketika Anda mengklik ikon tautan kecil dan Anda mendapatkan fungsionalitas pencarian AJAX di pop up ). Apakah ada yang tahu bagaimana saya bisa membuatnya bekerja? Saya punya tombol HTML yang ingin saya lampirkan dan klik rata, dan bidang untuk nilai masuk.

Di class-wp-editor.php saya menemukan beberapa hal menarik, dan bertanya-tanya apakah saya perlu file-file ini ..?

wp_enqueue_script('wp-fullscreen');
wp_enqueue_script('wplink');

Saat menelepon fullscreen.link();, seperti file yang disebutkan di atas, saya mendapatkan kesalahan ini:

Uncaught ReferenceError: wpActiveEditor is not defined

..dan saya bingung untuk saat ini, karena JS yang merujuk variabel itu terlihat gila bagi saya.

Mau mengarahkan saya ke arah yang benar? Saya ingin ini berfungsi, itu akan membuat antarmuka pengguna yang mematikan untuk widget saya!

------ sunting -------

Tidak banyak kode sejauh ini, terlepas dari penyertaan skrip yang telah saya nyatakan sebelumnya;

<label for="<?php echo $this->get_field_name('link'); ?>">Link URL (including http://) : </label>
<input type="text" id="<?php echo $this->get_field_id('link'); ?>" name="<?php echo $this->get_field_name('link'); ?>" value="<?php if(isset($link)) echo esc_attr($link); ?>" class="widefat" />
<button class="secondary" id="choose_link">Link Browser</button>

..bagian JS yang seharusnya memicu skrip tautan untuk membuka;

linkBrowserButton.on("click", function(e){
    e.preventDefault();
    fullscreen.link();
});

Saya memohon dialog tautan dalam kelas metabox yang saya gunakan untuk pengembangan. Ini sedikit hacky tetapi bisa dilakukan, sampai sesuatu yang lebih kuat dikembangkan.

Anda dapat memunculkan kotak tautan dengan terlebih dahulu memberikan js yang diperlukan, dan kemudian berinteraksi dengan metode file js-wp-link.

Pastikan Anda telah mengirimkan tautan-wp

1 / wp_enqueue_script( 'wp-link' );

2 / Siapkan ui Anda. Saya biasanya menggunakan tombol untuk mengaktifkan dialog tautan dari dan bidang teks untuk menangani URL tautan.

3 / Aktifkan dialog tautan

var _link_sideload = false; //used to track whether or not the link dialogue actually existed on this page, ie was wp_editor invoked.

var link_btn = (function($){
'use strict';
var _link_sideload = false; //used to track whether or not the link dialogue actually existed on this page, ie was wp_editor invoked.

/* PRIVATE METHODS
-------------------------------------------------------------- */
//add event listeners

function _init() {
    $('body').on('click', '.lm-link-button', function(event) {
        _addLinkListeners();
        _link_sideload = false;

        var link_val_container = $('#your_input_field');

        if ( typeof wpActiveEditor != 'undefined') {
            wpLink.open();
            wpLink.textarea = $(link_val_container);
        } else {
            window.wpActiveEditor = true;
            _link_sideload = true;
            wpLink.open();
            wpLink.textarea = $(link_val_container);
        }
        return false;
    });

}

/* LINK EDITOR EVENT HACKS
-------------------------------------------------------------- */
function _addLinkListeners() {
    $('body').on('click', '#wp-link-submit', function(event) {
        var linkAtts = wpLink.getAttrs();
        var link_val_container = $('#your_input_field');
        link_val_container.val(linkAtts.href);
        _removeLinkListeners();
        return false;
    });

    $('body').on('click', '#wp-link-cancel', function(event) {
        _removeLinkListeners();
        return false;
    });
}

function _removeLinkListeners() {
    if(_link_sideload){
        if ( typeof wpActiveEditor != 'undefined') {
            wpActiveEditor = undefined;
        }
    }

    wpLink.close();
    wpLink.textarea = $('html');//focus on document

    $('body').off('click', '#wp-link-submit');
    $('body').off('click', '#wp-link-cancel');
}

/* PUBLIC ACCESSOR METHODS
-------------------------------------------------------------- */
return {
    init:       _init,
};

})(jQuery);


// Initialise
jQuery(document).ready(function($){
 'use strict';
 link_btn.init();
});

4 // skrip enqueue. Tambahkan berikut ini ke file functions.php Anda, dan sesuaikan nama file / jalur yang sesuai.

function linkbtn_enqueue() {
    //register script
    wp_register_script('link_btn',get_template_directory_uri() . '/js/link_btn.js', array('jquery'), '1.0', true);
    //now load it
    wp_enqueue_script( 'link_btn');
}

 add_action( 'admin_enqueue_scripts', 'linkbtn_enqueue' );

Haruskah tentang melakukannya. Saya menggunakan pendekatan yang sama di kelas metabox saya dan sepertinya berhasil OK.

RE: "Bagaimana Anda melakukannya? (Kira-kira?)"

Pertama, saya akan membangunnya mirip dengan fungsionalitas tautan di WordPress: Bidang teks masukan, hasil, pilih fungsionalitas dan tombol kirim (tambahkan tautan).

Ajax - ini akan menyala ketika teks dimasukkan ke input, mengembalikan set hasil berdasarkan istilah pencarian. Lihatlah apa yang kami lakukan dengan plugin pencarian cepat kami , WP Jarvis. Anda hanya perlu mengatur panggilan ajax untuk menargetkan ajaxurl (admin-ajax.php) dan mengatur kait tindakan di php Anda untuk mengeksekusi kueri dan menggemakan hasil dalam format json. Anda ingin hasil menyertakan judul, tipe posting, dan tautan permanen untuk setiap hasil. Baca lebih lanjut tentang ajax di plugin .

Akhirnya, memilih hasil yang Anda tertarik akan mengambil permalink dari objek json dan memasukkan ke dalam bidang widget.

Saya tahu ini bukan jawaban yang lengkap, tetapi saya harap ini membantu.