web-dev-qa-db-ja.com

既存のTinyMCEボタンでHTML属性を挿入するにはどうすればいいですか？

投稿エディタに画像を挿入したら、それを選択して[左揃え]ボタンをクリックすると、alignleftCSSクラスが自動的に画像に追加されます。

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

私が達成したいのは、それがHTML属性align = "left"も追加することです。

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

注 ：エディタで選択されたときに画像の上に表示される整列ボタンについて具体的に話しています。

enter image description here

csstinymceeditorvisual-editor
3
mike23

次の回避策は、コアのwpeditimage/plugin.jsファイルに基づいています。

あなたはそれをエンキューするか、それでそれをテストすることができます：

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

ここでは、 here から Visual モードチェックを使用します。その後、 Text モードがデフォルトでロードされる場合をサポートするようにこれを調整できます。

前の答え：

便利なget_image_tag_alignフィルタのようなget_image_tag_classフィルタはありません。しかし、挿入されたHTMLを修正するためにimage_send_to_editorまたはget_image_tagフィルタを使うことができます。

例：

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