TinyMce in WordPress – Getting the “fullscreen” button to stay on the right when customising button layout

I’m using TinyMce inside WordPress and I have customised the button layout like so:

add_filter( 'tiny_mce_before_init', 'blm_format_tiny_mce' );
add_filter( 'mce_buttons', 'blm_extended_editor_mce_buttons', 0 );
add_filter( 'mce_buttons_2', 'blm_extended_editor_mce_buttons_2', 0 );

function blm_format_tiny_mce( $in ) {
    $in['remove_linebreaks']            = true;
    $in['convert_newlines_to_brs']      = false;
    $in['keep_styles']                  = true;
    $in['tabfocus_elements']            = 'publish';
    $in['paste_remove_styles']          = false;
    $in['paste_remove_spans']           = true;
    $in['paste_strip_class_attributes'] = 'mso';
    $in['paste_text_linebreaktype']     = 'combined';
    $in['plugins']                      = 'tabfocus,paste,textcolor,lists,fullscreen,wordpress,image,wpeditimage,wpgallery,wplink,wpdialogs';       
    //$in['valid_children']               = '+div[p]';

    return $in;
}

// TinyMCE: First line toolbar customizations
function blm_extended_editor_mce_buttons($buttons) {
    // The settings are returned in this array. Customize to suite your needs.
    return array(
        'formatselect, bold, italic, underline, bullist, numlist, blockquote, link, image, alignleft, aligncenter, alignright, alignjustify, wp_more, wp_adv, fullscreen'
    );
}

// TinyMCE: Second line toolbar customizations
function blm_extended_editor_mce_buttons_2($buttons) {
    // The settings are returned in this array. Customize to suite your needs. An empty array is used here because I remove the second row of icons.
    return array('strikethrough, forecolor, outdent, indent, pastetext, removeformat, wp_help');
}

However I have noticed when doing this the “fullscreen” button doesn’t stay on the right (like it is with the default layout).

I have checked on the code and it seems because they use different classes:

Default behaviour:

<div id="mceu_11" class="mce-widget mce-btn mce-wp-dfw" tabindex="-1" aria-pressed="false" role="button" aria-label="Distraction-free writing mode">
    <button id="mceu_11-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-dfw"></i>
    </button>
</div>

Custom layout:

<div id="mceu_15" class="mce-widget mce-btn mce-last" tabindex="-1" aria-pressed="false" role="button" aria-label="Fullscreen">
    <button id="mceu_15-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-fullscreen"></i>
    </button>
</div>

It seems with the default behaviour the button is positioned absolute; is there any particular way to do this within TinyMce’s config or do I need to apply the CSS myself?

0

Leave a Comment