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?
Topic plugin-tinymce tinymce visual-editor Wordpress
Category Web