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

9

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!

Geben Sie hier die Bildbeschreibung ein

------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();
});
Dan
quelle
3
Bitte machen Sie einen Screenshot oder ein animiertes GIF ( LiceCap ist ein schönes und kostenloses Tool) von dem, was Sie tun möchten. Bisher schwer vorstellbar. Und bitte machen Sie es eine Bearbeitung und keinen Kommentar. Vielen Dank.
Kaiser
@kaiser - Ok, fertig. Sie werden die Funktionalität sehen, nach der ich jetzt suche. PS - liebe LICEcap, danke für den Tipp!
Dan
Dann zeigen Sie uns bitte Ihren Widget-Code (den Teil, der den Inhalt erstellt). Hast du benutzt wp_editor()?
Kaiser
@kaiser - ein zusätzlicher Code hinzugefügt. Bisher nicht viel, aber ich hatte nicht erwartet, viel anderes zu tun, als ein Ereignis anzuhängen und das Skript einzuschließen (möglicherweise zu ändern, wo das Ergebnis aktualisiert wird), aber bisher kann ich das Popup überhaupt nicht öffnen.
Dan
1
Leider ist die Linkauswahl speziell für den TinyMCE-Editor geschrieben. Ich arbeite an einer Version, die alleine steht und ungefähr 80% dort hat. Es ist im Grunde eine Umschreibung der Linkauswahl ohne die TinyMCE-Abhängigkeiten.
Hereswhatidid

Antworten:

2

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.

Dale Sattler
quelle
Danke für den Beitrag Dale - das sieht sehr interessant aus. Ich bin so weit gekommen, den Button vorher zu machen und das wp-link-Skript aufzurufen, wusste aber nicht, wie ich es danach zum Laufen bringen sollte. Ich werde versuchen, in der nächsten Woche zwischen den Projekten mehr JS / AJAX zu lernen und dies auszuprobieren. Danke vielmals.
Dan
Sie müssen lediglich eine .js-Datei auf der Administrationsseite Ihres Themas in die Warteschlange stellen. Ich werde das Obige bearbeiten, um das widerzuspiegeln.
Dale Sattler
0

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.

MikeNGarrett
quelle