web-dev-qa-db-fra.com

Comment puis-je insérer des attributs HTML avec un bouton TinyMCE existant?

Lorsque j'insère une image dans l'éditeur de publication, sélectionnez-la et cliquez sur le bouton "aligner à gauche", elle ajoute automatiquement la classe alignleft CSS à l'image, comme suit:

<img 
    src = "http://www.example.org/media/myimage.png" 
    class = "wp-image-123 size-thumbnail alignleft" 
    height = "141" 
    width = "188" 
/>

Ce que j'aimerais réaliser, c'est qu'il ajoute également l'attribut HTML align = "left" , comme ça:

<img 
    src = "http://www.example.org/media/myimage.png" 
    class = "wp-image-123 size-thumbnail alignleft" 
    height = "141" 
    width = "188" 
    align = "left" 
/>

Note : Je parle spécifiquement des boutons d'alignement qui apparaissent sur une image lorsqu'elle est sélectionnée dans l'éditeur:

enter image description here

csstinymceeditorvisual-editor
3
mike23

La solution de contournement suivante est basée sur le fichier wpeditimage/plugin.js du noyau.

Vous pouvez le mettre en file d'attente ou le tester avec:

add_action( 'admin_footer-post.php', function()
{?><script> 
    jQuery(window).load( function( $ ) {
        if( ! $( "#wp-content-wrap").hasClass("tmce-active" ) ) return;
        var editor = tinyMCE.activeEditor;
        editor.on( 'BeforeExecCommand', function( event ) {
            var node, DL, cmd = event.command;
            if ( cmd === 'JustifyLeft' || cmd === 'JustifyRight' || cmd === 'JustifyCenter' || cmd === 'wpAlignNone' ) {
                 node = editor.selection.getNode();
                 DL   = editor.dom.getParent( node, '.wp-caption' );
                 if ( node.nodeName !== 'IMG' && ! DL ) return;
                 node.align = cmd.slice( 7 ).toLowerCase();
             }
        });
    });                                                                 
</script><?php } );

Ici, nous utilisons le contrôle du mode Visuel à partir de ici . Vous pouvez ensuite ajuster cela pour prendre en charge le cas où le mode Texte est chargé par défaut.

Réponse précédente:

Il n'y a pas de filtre get_image_tag_align, comme le filtre pratique get_image_tag_class. Mais nous pouvons utiliser les filtres image_send_to_editor ou get_image_tag pour modifier le code HTML inséré:

Exemple: 

add_filter( 'get_image_tag', function( $html, $id, $alt, $title, $align, $size )
{
    if( $align )
    {
        $align = sprintf( ' align="%s" ', esc_attr( $align ) );
        $html  = str_replace( "/>", "{$align}/>", $html );
    }
    return $html;
}, 10, 6 );
2
birgire