La boîte de dialogue HTML vient de WP_Editors::wp_link_dialog()
mais il n'y a pas de crochets.
Nous pourrions plutôt utiliser jQuery pour ajouter le code HTML personnalisé à la boîte de dialogue de lien et essayer de remplacer par exemple le wpLink.getAttrs()
, car il est très court ;-)
Exemple de démonstration:
jQuery( document ).ready( function( $ ) {
$('#link-options').append(
'<div>
<label><span>Link Class</span>
<select name="wpse-link-class" id="wpse_link_class">
<option value="normal">normal</option>
<option value="lightbox">lightbox</option>
</select>
</label>
</div>' );
wpLink.getAttrs = function() {
wpLink.correctURL();
return {
class: $( '#wpse_link_class' ).val(),
href: $.trim( $( '#wp-link-url' ).val() ),
target: $( '#wp-link-target' ).prop( 'checked' ) ? '_blank' : ''
};
}
});
Je viens de faire un test rapide et il semble fonctionner mais a besoin de tests et d'ajustements supplémentaires lors de la mise à jour des liens. Voici un vieux hack que j'ai fait qui pourrait avoir besoin d'un rafraîchissement.
Mise à jour
Il semble que vous souhaitiez ajouter l' rel="nofollow"
option à la boîte de dialogue de lien, alors mettons à jour l'approche ci-dessus pour ce cas:
Nous ajoutons l' rel
attribut link avec:
/**
* Modify link attributes
*/
wpLink.getAttrs = function() {
wpLink.correctURL();
return {
rel: $( '#wpse-rel-no-follow' ).prop( 'checked' ) ? 'nofollow' : '',
href: $.trim( $( '#wp-link-url' ).val() ),
target: $( '#wp-link-target' ).prop( 'checked' ) ? '_blank' : ''
};
}
Si l' rel
attribut est vide, il sera automatiquement supprimé du lien dans l'éditeur.
Ensuite, nous pouvons nous connecter à l' wplink-open
événement qui se déclenche lorsque la boîte de dialogue de lien est ouverte. Ici, nous pouvons injecter notre code HTML personnalisé et le mettre à jour en fonction de la sélection de liens actuelle:
$(document).on( 'wplink-open', function( wrap ) {
// Custom HTML added to the link dialog
if( $('#wpse-rel-no-follow').length < 1 )
$('#link-options').append( '<div> <label><span></span> <input type="checkbox" id="wpse-rel-no-follow"/> No Follow Link</label></div>');
// Get the current link selection:
var _node = wpse_getLink();
if( _node ) {
// Fetch the rel attribute
var _rel = $( _node ).attr( 'rel' );
// Update the checkbox
$('#wpse-rel-no-follow').prop( 'checked', 'nofollow' === _rel );
}
});
où nous utilisons la fonction d'assistance suivante, basée sur la getLink()
fonction principale, pour obtenir le code HTML du lien sélectionné:
function wpse_getLink() {
var _ed = window.tinymce.get( window.wpActiveEditor );
if ( _ed && ! _ed.isHidden() ) {
return _ed.dom.getParent( _ed.selection.getNode(), 'a[href]' );
}
return null;
}
Voici la sortie:
avec le code HTML suivant:
ps: Cela pourrait être testé plus avant et pourrait également être étendu pour prendre en charge les traductions
href
si l' utilisateur ne pas ouvrir la boîte de dialogue , mais il suffit d' utiliser la première boîte de pop - up qui a l'espace réservé:Paste URL or type to search
?mce_external_plugins
filtre pour charger le fichier de script ou leafter_wp_tiny_mce
crochet pour injecter l'extrait (avec la partie append comme une chaîne de ligne unique), pour tester cela. LagetAttrs
méthode ici ne remplacera que la valeur de la boîte de dialogue des paramètres de lien, je n'ai pas cherché à remplacer la valeur de l'entrée en ligne. Peut-être remplacer lawp_link_apply
commande si possible? Je pense que cela pourrait être une bonne nouvelle question ;-) @ Dan9tinymce.ui.Control.extend.setUrl
dans le pluginwp-includes/js/tinymce/plugins/wplink/plugin.js
.En regardant le cœur, il n'y a aucune trace de filtre ou d'action dans la
wp_link_dialog
fonction, ce qui aurait rendu votre vie plus facile ...En recherchant comment d'autres ont résolu ce problème, il existe un plugin qui fait plus ou moins la même chose que vous le souhaitez. Fondamentalement, il annule l'
wp_deregister_script('wplink');
enregistrement de wplink.js et enregistre à nouveau une version modifiée du fichier, cette fois en incluant le champ supplémentaire souhaité.Bien que je ne pense pas que ce soit la meilleure méthode (en tenant compte des éventuels conflits ultérieurs lors de la mise à jour de WordPress), je pense que c'est le moyen le plus simple de l'obtenir.
J'espère que cela aide!
la source