web-dev-qa-db-fra.com

Modifier les liens une fois insérés par l'éditeur WYSIWYG

Est-il possible de se connecter à l'éditeur de WordPress afin que, si un lien vers un contenu interne est inséré via l'éditeur WYSIWYG, l'ID de publication de cette publication liée soit ajouté en tant qu'attribut de données au lien?

filterslinkstinymcewysiwyg
6
luke

Le code HTML des liens internes insérés est généré par Javascript. Je ne connais donc aucun moyen facile de le modifier.

La génération HTML est contrôlée à partir de la méthode wpLink.htmlUpdate (mode HTML) et de la méthode wpLink.mceUpdate (mode TinyMCE), dans le fichier /wp-includes/js/wplink.js.

Voici quelques idées:

Ajoutez un paramètre de requête aux liens insérés:

Nous pourrions ajouter un paramètre de requête, contenant les informations d'identification de publication, à l'URL des liens insérés, par exemple:

http://example.dev/hello-world/?wpse_pid=475

avec ce qui suit:

/**
 * Append the wpse_pid query argument to inserted links
 *
 * @see http://wordpress.stackexchange.com/a/170836/26350
 */

add_filter( 'wp_link_query_args', function( $query ) {
    add_filter( 'post_link', 'wpse_post_link', 10, 2 );
    return $query;
});

add_filter( 'wp_link_query', function( $query ) {
    remove_filter( 'post_link', 'wpse_post_link', 10 );
    return $query;   
});

function wpse_post_link( $permalink, $post )
{
    if( false === stripos( $permalink, '?p=' ) )
            $permalink = add_query_arg( array( 'wpse_pid' => $post->ID ), $permalink );
    return $permalink;
}

Voici une capture d'écran montrant ceci en action:

link with the wpse_pid parameter

Remplacez la méthode wpLink.mceUpdate:

Le hack suivant est juste pour le plaisir, car la méthode pourrait changer dans le futur.

Ceci est un ajout aux extraits de code ci-dessus.

/** 
 * Override the wpLink.mceUpdate method to modify the inserted link HTML.
 *
 * @see http://wordpress.stackexchange.com/a/170836/26350
 */

add_action( 'admin_footer-post.php', function(){
?>
<script>
jQuery( document ).ready( function( $ ){
    wpLink.mceUpdate = function(){
            var link,
            attrs = wpLink.getAttrs(),
            editor = tinyMCE.activeEditor;

            wpLink.close();
            editor.focus();

            if ( tinymce.isIE ) {
                editor.selection.moveToBookmark( editor.windowManager.bookmark );
            }
            link = editor.dom.getParent( editor.selection.getNode(), 'a[href]' );

            // If the values are empty, unlink and return
            if ( ! attrs.href || attrs.href == 'http://' ) {        
                editor.execCommand( 'unlink' );
                return;
            }

            // Set the class attribute.
            attrs.class = 'wpse_pid';

            // Grab the value of the wpse_pid parameter and use as id attribute.
            // Modified version of http://www.sitepoint.com/url-parameters-jquery/
            var results = new RegExp('[\?&]wpse_pid=([^&#]*)').exec( attrs.href );
            attrs.id = ( results != null ) ? 'wpse_pid_' + results[1] : ''

            // Remove the ?wpse_pid=* part
            // Modified version of http://stackoverflow.com/a/7126657/2078474
            attrs.href = attrs.href.replace(/[\?&]?wpse_pid=([^&]$|[^&]*)/i, "");

            if ( link ) {
                editor.dom.setAttribs( link, attrs );
            } else {
                editor.execCommand( 'mceInsertLink', false, attrs );
            }

            // Move the cursor to the end of the selection
            editor.selection.collapse();
    }
});
</script>
<?php
}, 99 );

Le code HTML du lien inséré a maintenant la forme:

<a id="wpse_pid_475" 
   class="wpse_pid"  
   title="Hello World" 
   href="http://example.dev/hello-world/">Hello World</a>

où le lien non modifié est:

<a title="Hello World" 
   href="http://example.dev/hello-world/">Hello World</a>

Ici, j’ai utilisé les attributs class et id, car ils semblent être des attributs pris en charge par l’éditeur tinyMCE . J'ai essayé attrs.data mais cela n'a pas fonctionné. Vous voudrez peut-être approfondir cela.

Il devrait être similaire à remplacer la méthode wpLink.htmlUpdate. Mais ce n'est qu'une preuve de concept ;-)

Une autre idée serait d’analyser les liens du contenu de la publication lors des mises à jour et de les modifier avec quelques astucieux substituts d’expression rationnelle ou quelques PHP DOM modifications.

J'espère que vous pourrez aller plus loin et l'adapter à vos besoins.

6
birgire