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