wake-up-neo.com

Ändern Sie Links, wenn Sie vom WYSIWYG-Editor eingefügt werden

Gibt es eine Möglichkeit, sich in den Editor von WordPress einzuhängen, sodass beim Einfügen eines Links zu einem internen Inhalt über den WYSIWYG-Editor die Beitrags-ID des verknüpften Beitrags als Datenattribut zum Link hinzugefügt wird?

filterslinkstinymcewysiwyg
6
luke

Der HTML-Code für die eingefügten internen Links wird von Javascript generiert, daher ist mir keine einfache Möglichkeit bekannt, ihn zu ändern.

Die HTML-Generierung wird über die wpLink.htmlUpdate-Methode (HTML-Modus) und die wpLink.mceUpdate-Methode (TinyMCE-Modus) in der /wp-includes/js/wplink.js-Datei gesteuert.

Hier sind ein paar Ideen:

Fügen Sie den eingefügten Links einen Abfrageparameter hinzu:

Wir könnten der URL der eingefügten Links einen Abfrageparameter hinzufügen, der die Post-ID-Informationen enthält. Beispiel:

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

mit den folgenden:

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

Hier ist ein Screenshot, der dies in Aktion zeigt:

link with the wpse_pid parameter

Überschreibe die wpLink.mceUpdate Methode:

Der folgende Hack ist nur zum Spaß, da sich die Methode in Zukunft ändern könnte.

Dies ist eine Ergänzung zu den obigen Codeausschnitten.

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

Der HTML-Code des eingefügten Links hat jetzt die Form:

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

wo der unveränderte Link ist:

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

Hier habe ich die Attribute class und id verwendet, da sie vom tinyMCE Editor unterstützt zu werden scheinen. Ich habe versucht, attrs.data, aber das hat nicht funktioniert. Vielleicht möchten Sie das genauer untersuchen.

Es sollte ähnlich sein, die wpLink.htmlUpdate-Methode zu überschreiben. Das ist aber nur ein Proof of Concept ;-)

Eine andere Idee wäre, die Links des Beitragsinhalts während Aktualisierungen zu scannen und sie mit einigen cleveren Regexp-Ersetzungen oder einigen PHP DOM-Änderungen zu ändern.

Hoffentlich können Sie dies weiterführen und an Ihre Bedürfnisse anpassen.

6
birgire