wordpress 3.5 tinymce height

4 Views

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?

Read More

UPDATE

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

enter image description here

Post Views: 4

Related posts

Leave a Reply

5 comments

  1. @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 😀

    • 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

  2. 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

  3. 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>
    ';
}

  4. 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' );