web-dev-qa-db-fra.com

Comment utiliser "Ajouter un lien" pop-up 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. Est-il possible 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: enter image description here

postslinksapiwysiwyghtml-editor
12
Benny Neugebauer

J'ai essayé pendant un moment et je ne pouvais pas obtenir que cela fonctionne parfaitement, mais c'est proche, il est difficile d'étendre avec le <form> pour les styles de popups étant codés en dur, pensé possible avec plus de travail.

Pour commencer, vous pouvez:

Mettez en file d'attente le lien javascript et les styles du lien, le fichier .js principal est wp-includes/wplink.js. Selon l'endroit où vous chargez cela, 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."};

Maintenant, vous devriez pourrez étendre la fonction wpLink 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 élément <form> pour la fenêtre contextuelle qui, par défaut, est trop long pour coller ici, vous pouvez voir celui-ci ici: https://Gist.github.com/wycks/6402573

Maintenant, il y a des problèmes majeurs avec ceci, à savoir que je n'ai pas ajouté de code JavaScript de fermeture ou de soumission (ou vérification) à la fonction, tel que wpLink.close ou wpLink.textarea, consultez donc wplink.js pour plus d'informations.

Désolé, il me faut beaucoup de temps pour tripoter, à moins que je ne manque quelque chose de fondamental, mais cela devrait vous faire perdre la moitié du temps.

8
Wyck