2

I've just upgraded wordpress to 3.5 version and I noticed that TinyMCE Advanced Editor is not as tall as before.

How can I change default tinyMCE height?

UPDATE

This is the screenshot of section I want to render higher than the default

enter image description here

5 Answers 5

2

@frabiacca: I'm not sure if you meant the toolbar menu, like Circle B showed or the height of the writing place. If it's the latter you can :

  • do it easily by gragging the bottom right corner or the textarea or clicking on the fullscreen button of the editor :D

  • do it programmatically

codex.wordpress.org/TinyMCE

function wptiny($initArray){
    $initArray['height'] = '600px';
    return $initArray;
}
add_filter('tiny_mce_before_init', 'wptiny');

but this doesn't seem to work though it should

1
0

To increase the height of the actual editing area of the WYSIWYG, add this code to the functions.php file:

add_action('admin_head', 'content_textarea_height');
function content_textarea_height() {
    echo'
    <style type="text/css">
            #content{ height:1000px !important; }
    </style>
    ';
}

To show all of the options in the tinyMCE you need to click the Kitchen Sink button:

enter image description here

4
  • I just edited my question by inserting a screeshot of section I want to make higher
    – frabiacca
    Commented Mar 30, 2013 at 11:43
  • I've updated the answer...
    – Circle B
    Commented Mar 30, 2013 at 13:17
  • it does not work ... maybe because of qtranslate plugin?
    – frabiacca
    Commented Mar 30, 2013 at 15:07
  • That could be the case, can you inspect the element in FireBug or Chrome to see whether the style is even trying being applied?
    – Circle B
    Commented Mar 31, 2013 at 3:44
0

If the height of your editor has been changed after using qtranslate plugin (and only in this case), use the code below in your functions.php file :

// fix editor height problem with qtranslate
add_action('admin_head', 'content_textarea_height');
function content_textarea_height() {
    echo'
    <style type="text/css">
        #qtrans_textarea_content_ifr{ height:420px !important; }
    </style>
    ';
}
0

To add all the buttons shown on your screenshot you can set tiny beforehand by specializing the icons you want to see and where, take a look at the source of wp-includes/class-wp-editor.php

You may do something like this (reusing @user29296 proposed answer) by indicating the buttons you want on each lines of the header (i used only a few icons but you can add whatever you need on keys 1, 3 and 4 !! not 2 as it will not show...)

function wptiny($initArray)
{
    $initArray['editor_height'] = '360';
    $initArray['theme_advanced_buttons1'] = 'bold,italic,underline';
    // key 2 won't show, so not needed, hence we use wp_adv to show others by default
    $initArray['theme_advanced_buttons2'] = 'wp_adv';
    $initArray['theme_advanced_buttons3'] = 'justifycenter,justifyright';
    $initArray['theme_advanced_buttons4'] = 'link,unlink,undo,redo';
    return $initArray;
}
add_filter('tiny_mce_before_init', 'wptiny');

In regards to the height of the editor(s), here is a more generic method that would respond to all needs no matter what id or class you apply (also works for an array of textareas)

function admin_custom_css()
{
    $data = '
        .wp-editor-container textarea.wp-editor-area,.mceIframeContainer iframe{
            min-height:360px !important;
        }
    ';
    $data = '<style type="text/css">'.$data.'</style>';

    echo $data;
}
add_action('admin_head', 'admin_custom_css' );
0

I added this to my CSS and it worked for me.

iframe#name_of_iframe_id {min-height: 450px; !important;}

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.