it-swarm-pt.com

Como posso inserir atributos HTML com um botão TinyMCE existente?

Quando insiro uma imagem no editor de postagem, seleciono e clico no botão "alinhar à esquerda", ela adiciona automaticamente a classealignleftCSS à imagem, assim:

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

O que eu gostaria de conseguir é que também adicione o atributo HTMLalign = "left", assim:

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

Nota : Eu estou falando especificamente sobre os botões de alinhamento que aparecem sobre uma imagem quando ela é selecionada no editor:

enter image description here

3
mike23

A seguinte solução alternativa é baseada no arquivo wpeditimage/plugin.js no núcleo.

Você pode enfileirá-lo ou testá-lo com:

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 } );

Aqui nós usamos a verificação Visual mode from here . Então você pode ajustar isso para suportar o caso quando o Text mode é carregado por padrão.

Resposta anterior:

Não há filtro get_image_tag_align, como o útil filtro get_image_tag_class. Mas podemos usar os filtros image_send_to_editor ou get_image_tag para modificar o HTML inserido:

Exemplo:

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