Wie kann ich die integrierte Wordpress-Funktion "Link durchsuchen" verwenden?

Ich codiere ein Widget und möchte, dass der Benutzer einen Link auswählen kann, wie Sie es beim Bearbeiten von regulären Posts oder Seiten können (wenn Sie auf das kleine Link-Symbol klicken und die AJAX-Suchfunktion im Popup erhalten ). Weiß jemand, wie ich das zum Laufen bringe? Ich habe eine HTML-Schaltfläche, die ich anhängen und sogar anklicken möchte, und ein Feld, in das der Wert eingegeben werden soll.

In class-wp-editor.php habe ich ein paar interessante Dinge gefunden und mich gefragt, ob ich diese Dateien möglicherweise benötige.

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

Beim Aufrufen fullscreen.link();wird wie in der oben genannten Datei folgende Fehlermeldung angezeigt:

Uncaught ReferenceError: wpActiveEditor is not defined

..und ich bin vorerst ratlos, weil der JS, der auf diese Variable verweist, für mich verrückt aussieht.

Möchtest du mich in die richtige Richtung weisen? Ich würde das gerne zum Laufen bringen, es wird eine Killer-Benutzeroberfläche für meine Widgets machen!

------bearbeiten-------

Bisher nicht so viel Code, abgesehen von den Skripteinschlüssen, die ich zuvor angegeben habe;

<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>

..der Teil des JS, der das Öffnen des Link-Skripts auslösen soll;

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

Ich rufe den Link-Dialog innerhalb der Metabox-Klasse auf, die ich für die Entwicklung verwende. Es ist ein bisschen hacky aber kann getan werden, bis etwas mehr robust entwickelt.

Sie können das Linkfeld aufrufen, indem Sie zuerst die erforderlichen js in die Warteschlange stellen und dann mit den Methoden der wp-link js-Dateien interagieren.

Stellen Sie sicher, dass Sie wp-link in die Warteschlange gestellt haben

1 / wp_enqueue_script( 'wp-link' );

2 / Richten Sie Ihre Benutzeroberfläche ein. Normalerweise verwende ich eine Schaltfläche zum Aufrufen des Linkdialogs und ein Textfeld zum Behandeln der Link-URL.

3 / Linkdialog aufrufen

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 // Skripte in die Warteschlange stellen. Fügen Sie Ihrer Datei functions.php Folgendes hinzu und passen Sie die Dateinamen / -pfade entsprechend an.

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' );

Sollte es ungefähr tun. Ich verwende den gleichen Ansatz in meiner Metabox-Klasse und es scheint in Ordnung zu funktionieren.

RE: "Wie würden Sie das machen? (Ungefähr?)"

Zuerst würde ich es ähnlich wie die Link-Funktionalität in WordPress erstellen: Ein Eingabetextfeld, Ergebnisse, Auswahlfunktionalität und Senden-Schaltfläche (Link hinzufügen).

Ajax - Dies wird ausgelöst, wenn Text in die Eingabe eingegeben wird und eine Reihe von Ergebnissen basierend auf dem Suchbegriff zurückgegeben wird. Schauen Sie sich an, was wir mit unserem QuickSearch-Plugin WP Jarvis gemacht haben. Sie müssen nur den Ajax-Aufruf einrichten, um auf Ajaxurl (admin-ajax.php) abzuzielen, und einen Aktions-Hook in Ihrem PHP festlegen, um die Abfrage auszuführen und die Ergebnisse im JSON-Format wiederzugeben. Sie möchten, dass die Ergebnisse für jedes Ergebnis Titel, Post-Typ und Permalink enthalten. Lesen Sie mehr über Ajax in Plugins .

Wenn Sie schließlich das gewünschte Ergebnis auswählen, wird der Permalink aus dem JSON-Objekt abgerufen und in das Widget-Feld eingefügt.

Ich weiß, dass dies keine vollständige Antwort ist, aber ich hoffe, dass dies hilft.