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>

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>

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?


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.