Auto-resize ao escrever com o editor WP personalizado

Notei que meu editor WP de publicação de edição se expande automaticamente ao escrever. No entanto, minhas instâncias de editor WP que eu uso para meus outros tipos de postagem personalizados não.

Eu investiguei um pouco e vejo que o iframe, incluindo a área de texto na postagem de edição incorporada, tem um corpo que possui uma class “wp-autoresize”. As minhas postagens personalizadas não. Eu pensei que adicionar essa class seria tudo o que eu preciso para permitir o recurso de atualização automática. Pelo menos, valeu a pena tentar.

Então, eu tento adicionar esta class aos corpos iframe dos meus plugins CPT como este:

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

Mas a class não aparece lá.

Eu tentei isso também (querendo então segmentar cada ID do iframe do CP especificamente):

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

Sem sucesso também.

Tudo o que eu tentei adicionar uma class a um corpo do iframe era apenas uma falha.

Então eu tentei simplesmente ignorar essa abordagem da class do corpo para adicionar o recurso de redimensionamento automático do TinyCME de outra maneira:

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

Não.

E então tentou adicionar um plugin artesanal mais sofisticado como descrito aqui:

Autoresize TinyMCE

Mas nada também acontece.

E, por nada, quero dizer que, quando meu texto cresce grande enquanto eu escrevo, a área de texto mantém sua altura original e eu tenho que rolar para ver todo o conteúdo.

Alguns eu estou preso porque acredito que tentei todas as soluções padrão que encontrei nas 3 horas anteriores. Agora eu continuo encontrando as mesmas soluções que tentei já.

Então, como posso obter uma revisão automática em editores TinyMCE personalizados aplicados em postagens personalizadas?

Obrigado.

EDIT: Pedi-me para mostrar o modo como registrei o 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. See xxx','your_text_domain'),esc_url(get_permalink($post_ID))), 4 => __('xxx updated.', 'your_text_domain'), 6 => sprintf(__('xxx published. See xxx','your_text_domain'),esc_url(get_permalink($post_ID))), 7 => __('xxx saved.','your_text_domain'), 9 => sprintf(__('Elément prévu pour: %1$s. Prévisualiser l\'élément','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. Prévisualiser l\'élément','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' ); 

E aqui como eu adicionei um editor à minha página de administração do CP:

 ID, '_xxx_textarea', true); ?>  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;}   '_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);}; } 

Espero que ajude.

Apenas FYI, lembrei o iframe e o corpo do meu CPT exatamente o mesmo que os que eu encontrei para o post de edição padrão.

Eu adicionei a bandeira “! Importante” ao auge do iframe porque parece que, em algum lugar em um arquivo WP, está configurado para 400px. Então, desta forma, é claramente substituído.

Então, eu não deveria esperar nada bloqueando a parte CSS, mas não posso ser absolutamente positivo sobre isso.

Solutions Collecting From Web of "Auto-resize ao escrever com o editor WP personalizado"

Finalmente, encontrei isso.

Você precisa modificar o tinymce args passado para a function wp_editor. WordPress tem um argumento wp_autoresize_on para permitir que o editor seja redimensionado automaticamente.

Então, em vez disso:

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

você precisa usar isso:

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

Existem dois args adicionais aqui, autoresize_min_height , você pode configurá-lo para a altura desejada, e o segundo é 'wp_autoresize_on' => true, ,. Além disso, você precisa passar um parâmetro adicional para carregar o plugin tinymce para redimensionamento automático e, por exemplo, 'plugins' => 'wpautoresize' e o redimensionamento automático funciona perfeitamente.

Com essas mudanças, sugiro que você adicione algumas outras verificações em seu código. Gosto da 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);}; } 

Certifique-se de adicionar um cheque para $ _POST vazio, caso contrário você receberá avisos na canvas de edição de postagem. Eu fiz as alterações e formatou o código (Você deveria estar fazendo isso), aqui está o código inteiro para adicionar 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 ); }; } 

Isso deve resolver. Postagem correspondente: http://codechutney.com/auto-resize-wp-editor-custom-instance/