Wie man das Popup "Link hinzufügen" für ein WordPress-Widget verwendet

Im WYSIWYG-Editor von WordPress erhalten Sie ein Popup, wenn Sie einen Link für einen Text hinzufügen möchten. Gibt es eine Möglichkeit, auf diese Funktionalität zuzugreifen? Weil ich dieses Popup für ein WordPress-Widget verwenden möchte, das ich erstellt habe, damit Sie Links zu einem Widget hinzufügen können, wenn Sie es im Backend konfigurieren.

Hier ist ein Screenshot von dem, was ich meine:

Ich habe es ein bisschen versucht und konnte es nicht perfekt machen, aber es ist nah, es ist schwer zu erweitern, wenn <form>die Popup-Stile hartcodiert werden, was mit mehr Arbeit für möglich gehalten wird.

Um loszulegen, können Sie:

Aktivieren Sie das Link-Popup-Javascript und die Stile. Die Haupt-JS-Datei ist wp-includes/wplink.js. Abhängig davon, wo Sie dies laden, müssen Sie möglicherweise mehr oder weniger Skripte / Stile hinzufügen, da mehrere verwendet werden ( Thickbox, jQuery-UI, UI-Dialog usw. ).

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

Setzen Sie die übersetzbare Variable:

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

Nun sollten Sie in der Lage sein, die wpLinkFunktion mit etwas zu erweitern :

// 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;
});

Sie benötigen ein <form>Element für das Popup, das hier per se viel zu lange einzufügen ist. Das defualt-Element finden Sie hier: https://gist.github.com/wycks/6402573

Jetzt gibt es große Probleme damit, nämlich dass ich kein Schließen oder Senden (oder Überprüfen) von Javascript zu der Funktion hinzugefügt habe, wie z. B. wpLink.closeoder wpLink.textarea, siehe wplink.jsfür weitere Informationen.

Tut mir leid, das dauert einfach zu lange, bis ich etwas Grundlegendes vermisse, aber das sollte dir den größten Nutzen bringen.