如何使用现有的TinyMCE按钮插入HTML属性？

时间：2015-02-05 作者：mike23

当我将图像插入post editor时，选择它并单击“左对齐”按钮，它会自动将CSS类添加到图像中，如下所示：

<img 
    src = "http://www.example.org/media/myimage.png" 
    class = "wp-image-123 size-thumbnail alignleft" 
    height = "141" 
    width = "188" 
/>
我想实现的是，它还添加了HTML attibute，如下所示：

<img 
    src = "http://www.example.org/media/myimage.png" 
    class = "wp-image-123 size-thumbnail alignleft" 
    height = "141" 
    width = "188" 
    align = "left" 
/>
Note : 我专门讨论的是在编辑器中选择图像时显示在图像上方的对齐按钮：

enter image description here

1 个回复
最合适的回答,由SO网友:birgire 整理而成

以下解决方法基于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. 然后，您可以对其进行调整，以支持默认加载文本模式时的情况。

上一个答案：

没有get_image_tag_align 过滤器，就像handyget_image_tag_class 滤器但我们可以使用image_send_to_editor 或get_image_tag 用于修改插入HTML的筛选器：

Example:

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

结束
标签： css   tinymce   editor   visual-editor   小码农  

相关推荐

使用WP_QUERY显示WordPress废墟页面css中的内容，不显示内容

我想这里有一个双管齐下的问题。我试图在我自己的网站上显示wordpress帖子。我有一个页面，人们可以在其中查看文章列表，然后当他们单击其中一篇文章时，就会进入文章页面（我用自己的模板替换了标准index.php，以便帖子显示我想要的内容）。然而，问题就从这一页开始。Problem One使用时<? if ( $wp_query->have_posts() ) : while ( $wp_query->have_posts() ) : $wp_query->the_post();