Auto-resize when writing with Custom post WP editor

Question

I noticed that my edit post WP editor expands automatically when writing. However my WP editor instances I use for my other Custom post types don't.

I investigated a bit I and I see that the iframe including the textarea in the built-in edit post has a body which has a "wp-autoresize" class. The ones of my custom posts don't. I thought that adding that class would be all I need to allow the autoresize feature. At least, it was worth the try.

So, I try to add this class to the iframe bodies of my CPT plugins like this:

add_filter( 'tiny_mce_before_init', 'wpse_235194_tiny_mce_classes' );
function wpse_235194_tiny_mce_classes( $init_array ){
  global $post;
    $init_array['body_class'] .= ' ' . join( ' ', 'wp-autoresize' );
  return $init_array;
}

But the class doesn't appear there.

I tried this too (willing then to target each CP iframe id specifically):

$("iframe#_xxx_textarea").contents().find("body").addClass("wp-autoresize");

No success neither.

Whatever I tried to add a class to an iframe body was just a failure.

So I tried to just bypass this body class approach to add the auto-resize feature for TinyCME in another way:

function init_tinymce_autoresize($initArray){
   $initArray['plugins'] = "autoresize";
   return $initArray;
}
add_filter('tiny_mce_before_init', 'init_tinymce_autoresize');

Nope.

And then tried to add a more sophisticated handmade plugin as described here:

TinyMCE Autoresize

But nothing happens neither.

And by nothing, I mean that when my text grows big as I type, the textarea keeps its original height and I have to scroll to see the whole content.

Some I'm stuck as I believe I tried all the standard solutions I found in the previous 3 hours. Now I keep finding the same solutions I tried already.

So how can I achieve an autoresize on custom TinyMCE editors applied to Custom posts?

Thanks.

EDIT: I've been asked to show the way I registered the CPT:

    function xxx_custom_type_init()
    {
        register_post_type('xxx', array(
          'labels' => array(
          'name' => 'xxx',
          'singular_label' => 'xxx',
          'add_new' => 'Ajouter',
          'add_new_item' => 'Ajouter un élément',
          'new_item' => 'Nouvel élément',
          'view_item' => 'Afficher l\'élément',
          'edit_item' => 'xxx',
          'not_found' => 'Auncun élément trouvé',
          'not_found_in_trash' => 'Auncun élément dans la corbeille'),
          'public' => true,
          'show_ui' => true,
          'capability_type' => 'post',
          'hierarchical' => false,
          'supports' => array('')
        ));
        register_taxonomy_for_object_type( 'category', 'xxx' );
    }
    add_action('init', 'xxx_custom_type_init');

    function xxx_custom_type_messages( $messages ) 
    {
        global $post, $post_ID;
        $messages['xxx'] = array(
            1 => sprintf(__('xxx updated. <a href="%s">See xxx</a>','your_text_domain'),esc_url(get_permalink($post_ID))),
            4 => __('xxx updated.', 'your_text_domain'),
            6 => sprintf(__('xxx published. <a href="%s">See xxx</a>','your_text_domain'),esc_url(get_permalink($post_ID))),
            7 => __('xxx saved.','your_text_domain'),
            9 => sprintf(__('Elément prévu pour: <strong>%1$s</strong>. <a target="_blank" href="%2$s">Prévisualiser l\'élément</a>','your_text_domain'),
            date_i18n(__('M j, Y @ G:i'),strtotime($post->post_date)),esc_url(get_permalink($post_ID))),
            10 => sprintf(__('Brouillon mis à jour. <a target="_blank" href="%s">Prévisualiser l\'élément</a>','your_text_domain'),esc_url(add_query_arg('preview','true',get_permalink($post_ID)))),
        );
        return $messages;
    }
    add_filter( 'post_updated_messages', 'xxx_custom_type_messages' );

And here how I added an editor to my CP admin page:

<?php

add_action( 'add_meta_boxes', 'xxx_textarea_add_fields_metabox');
function xxx_textarea_add_fields_metabox() 
{
    add_meta_box(
        'xxx_textarea_metabox', 
        'Intro', 
        'xxx_textarea_show_fields_metabox', 
        'xxx', 
        'side', 
        'default'
    );
}

function xxx_textarea_show_fields_metabox()
{   
    global $post; 
    $content = get_post_meta($post->ID, '_xxx_textarea', true); 

    ?>  

    <style> 

        iframe#_xxx_textarea_ifr
            {width:100%;height:auto !important;display:block;}
        iframe#_xxx_textarea_ifr html
            {overflow:hidden;display: block;}
        iframe#_xxx_textarea_ifr body
            {overflow:hidden;display: block;}
        #_xxx_textarea
            {height:auto;overflow-y: hidden;min-height: 35px;overflow-x: hidden;overflow-y: auto;}

    </style>    

    <?php   

    $args = array(
        'description_name' => '_xxx_textarea',
         'teeny' => true,
         'quicktags' => false,
         'media_buttons' => false,
         'tinymce' => array(
             'toolbar1'=> 'bold,italic,underline,link,unlink,forecolor',
             'toolbar2' => '',
             'toolbar3' => ''
         )
    );
    wp_editor( $content, '_xxx_textarea', $args );
    wp_nonce_field(plugin_basename(__FILE__), 'xxx_textarea_noncename');    
};      

add_action('save_post', 'xxx_textarea_save_fields_metabox', 1, 2);
function xxx_textarea_save_fields_metabox($post_id, $post) 
{
    global $post_id;

    if ( !wp_verify_nonce( $_POST['xxx_textarea_noncename'], plugin_basename(__FILE__) )){return $post->ID;}  
    if ( !current_user_can( 'edit_post', $post->ID ))                                      {return $post->ID;}   
    if( $post->post_type == 'revision' )                                                 {return;$post->ID;}

    if($_POST['_xxx_textarea']) {$xxx_content = $_POST['_xxx_textarea'];}
    else{$xxx_content = '';};

    if(get_post_meta($post_id, '_xxx_textarea', FALSE)){update_post_meta($post_id, '_xxx_textarea', $xxx_content);} 
    else{ add_post_meta($post_id, '_xxx_textarea', $xxx_content);};             
}

I hope it helps.

Just FYI, I styled the iframe and body of my CPT exactly the same than the ones I found for the standard edit post.

I added the "!important" flag to the height of the iframe because it seems that, somewhere in a WP file, it's set to 400px. So, this way, it's clearly overridden.

So, I should not expect anything blocking on the CSS part but I can't be absolutely positive about this.

Answer 1

Finally I got around this.

You need to modify tinymce args passed to wp_editor function. WordPress have a argument wp_autoresize_on to allow the editor to be resized automatically.

So instead of these:

'tinymce' => array(
         'toolbar1'=> 'bold,italic,underline,link,unlink,forecolor',
         'toolbar2' => '',
         'toolbar3' => ''
     )

you need to use this:

'tinymce' => array(
        'autoresize_min_height' => 100,
        'wp_autoresize_on'      => true,
        'plugins'               => 'wpautoresize',
        'toolbar1'              => 'bold,italic,underline,link,unlink,forecolor',
        'toolbar2'              => '',
    ),

There are two additional args in here, autoresize_min_height, you can set it to desired height, and second one is 'wp_autoresize_on' => true,. Apart from that you need to pass additional parameter to load the tinymce plugin for auto resizing and i.e 'plugins' => 'wpautoresize' and the auto resizing works flawlessly.

With these changes, I'd suggest you add some other checks in your code. Like for the function:

function xxx_textarea_save_fields_metabox($post_id, $post) {
  global $post_id;

  if ( !wp_verify_nonce( $_POST['xxx_textarea_noncename'], plugin_basename(__FILE__) )){return $post->ID;}  
  if ( !current_user_can( 'edit_post', $post->ID ))                                      {return $post->ID;}   
  if( $post->post_type == 'revision' )                                                 {return;$post->ID;}

  if($_POST['_xxx_textarea']) {$xxx_content = $_POST['_xxx_textarea'];}
  else{$xxx_content = '';};

  if(get_post_meta($post_id, '_xxx_textarea', FALSE))
  {update_post_meta($post_id, '_xxx_textarea', $xxx_content);} 
  else{ add_post_meta($post_id, '_xxx_textarea', $xxx_content);};             

  }

Make sure to add a check for empty $_POST, otherwise you'll get notices on post edit screen. I've made the changes and formatted the code ( You should be doing that ), here is the whole code for adding metabox.

add_action( 'add_meta_boxes', 'xxx_textarea_add_fields_metabox' );
function xxx_textarea_add_fields_metabox() {
    add_meta_box(
        'xxx_textarea_metabox',
        'Intro',
        'xxx_textarea_show_fields_metabox',
        'new_xxx',
        'side',
        'default'
    );
}

function xxx_textarea_show_fields_metabox() {
    global $post;
    $content = get_post_meta( $post->ID, '_xxx_textarea', true );
    //Loads the editor to allow adding fresh content if there is no content already
    $content = empty( $content ) ? '' : $content;

    $args = array(
        'description_name' => 'xxx_textarea',
        'teeny'            => true,
        'quicktags'        => false,
        'media_buttons'    => false,
        'tinymce'          => array(
            'autoresize_min_height' => 100,
            'wp_autoresize_on'      => true,
            'plugins'               => 'wpautoresize',
            'toolbar1'              => 'bold,italic,underline,link,unlink,forecolor',
            'toolbar2'              => '',
        ),
    );
    wp_editor( $content, '_xxx_textarea', $args );
    wp_nonce_field( plugin_basename( __FILE__ ), 'xxx_textarea_noncename' );
}

add_action( 'save_post', 'xxx_textarea_save_fields_metabox', 1, 2 );
function xxx_textarea_save_fields_metabox( $post_id, $post ) {
    global $post_id;

    //Avoids notice and warnings
    if( empty( $_POST ) ) {
        return $post->ID;
    }
    if ( !empty( $_POST['xxx_textarea_noncename'] ) && ! wp_verify_nonce( $_POST['xxx_textarea_noncename'], plugin_basename( __FILE__ ) ) ) {
        return $post->ID;
    }
    if ( ! current_user_can( 'edit_post', $post->ID ) ) {
        return $post->ID;
    }
    if ( $post->post_type == 'revision' ) {
        return;
        $post->ID;
    }

    if ( $_POST['_xxx_textarea'] ) {
        $xxx_content = $_POST['_xxx_textarea'];
    } else {
        $xxx_content = '';
    };

    if ( get_post_meta( $post_id, '_xxx_textarea', false ) ) {
        update_post_meta( $post_id, '_xxx_textarea', $xxx_content );
    } else {
        add_post_meta( $post_id, '_xxx_textarea', $xxx_content );
    };
}

That should do it. Corresponding Post: http://codechutney.com/auto-resize-wp-editor-custom-instance/

Answer 2

I realise this is several years later and I don't know if this functionality was available at the time but now its as easy as passing wp_autoresize_on as true to the setup config

In javascript

wp.editor.initialize('case-'+caseid+'-post_content', {'tinymce': {
                    'wp_autoresize_on' : true
                }, 'quicktags': true, 'mediaButtons': true});