Comment utiliser la fenêtre contextuelle "Ajouter un lien" pour un widget WordPress

Dans l'éditeur WYSIWYG de WordPress, vous obtenez une fenêtre contextuelle si vous souhaitez ajouter un lien pour un texte. Y a-t-il une possibilité d'accéder à cette fonctionnalité? Parce que je veux utiliser cette fenêtre contextuelle pour un widget WordPress que j'ai créé afin que vous puissiez ajouter des liens vers un widget si vous le configurez dans le backend.

Voici une capture d'écran de ce que je veux dire:

J'ai essayé un peu et je n'ai pas pu faire fonctionner cela parfaitement, mais c'est proche, c'est difficile à étendre avec les <form>styles popup qui sont codés en dur, pensés possible avec plus de travail.

Pour commencer, vous pouvez:

Enqueue le lien popup javascript et les styles, le fichier .js principal est wp-includes/wplink.js. Selon l'endroit où vous le chargez, vous devrez peut-être ajouter plus ou moins de scripts / styles car il repose sur plusieurs ( thickbox, jQuery-ui, ui-dialog, etc. ).

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

Définissez la variable traduisible:

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

Vous devriez maintenant pouvoir étendre la wpLinkfonction en utilisant quelque chose comme:

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

Vous avez besoin d'un <form>élément pour le pop-up qui par défaut est trop long à coller ici, vous pouvez voir celui-ci ici: https://gist.github.com/wycks/6402573

Maintenant, il y a des problèmes majeurs avec cela, à savoir que je n'ai pas ajouté de javascript de fermeture ou de soumission (ou de vérification) à la fonction, comme wpLink.closeou wpLink.textarea, alors consultez wplink.jspour plus d'informations.

Désolé, cela prend trop de temps à jouer, sauf si je manque quelque chose de basique, mais cela devrait vous aider la plupart du temps.