Wp_editor bug with foreach()?

Question

In the user profile I provide some wp_editor() for user can insert some extra information the the problem happen

 foreach ($condition as $b) {
                $check = $b.$lang;
                ?>
            <div id="tabs-<?php echo $i ?>">
            <?php wp_editor(get_the_author_meta($b . $lang, $profile_id), $check, $settings = array('textarea_name' => $b . $lang, 'textarea_rows' => 10));
            ?>
            </div>
        <?php

I'm using tab to switch between these wp_editor(), the problem is the 'textarea_rows' => 10 not apply for all wp_editor() it just apply for the first editor() .In research I found out that this bug just happen when I using foreach with wp_editor() to create some editor if i do it manualy like

    <?php wp_editor('', 'test1', $settings = array('textarea_rows' => 10));
 wp_editor('', 'test2', $settings = array('textarea_rows' => 5));
                    ?>

then the wp_editor work nomarlly. Please help why textarea_rows not work properly when using foreach ?

Answer 1

I am unable to duplicate your problem.

add_action( 'admin_menu', function () {
    add_menu_page( 'Multiple Editor Test', 'Multiple Editor Test', 'edit_posts',
       'multiple-editor-test', function () {
        foreach ( ['a', 'b', 'c' ] as $i ) {
            wp_editor( '', 'multiple_editor_test_' . $i, [
                'textarea_name' => 'multiple_editor_test_' . $i,
                'textarea_rows' => 2
            ] );
        }
    } );
} );

I tested the above code and it worked perfectly - all editors have 2 rows.

Please try above code and see if it works in your environment. Put it in you functions.php and look for the menu item in the dashboard.

There is something interesting going on here! I really would like to understand this.

If the above works for you try removing the tabs.

Answer 2

So here is the alternative way to solve this,i'm using this js:

Query(document).ready(function($) {
      window.onload = function() { // textarea_rows
    var lang = ['en', 'vi'];
    var condition = ['add_', 'edu_', 'res_', 'ref_', 'awa_', 'hob_', 'emp_'];
    for (i = 0; i < condition.length; i++)
        for (j = 0; j < lang.length; j++)
        {

            if (document.getElementById(condition[i] + lang[j] + '_ifr') != undefined)
            {
                document.getElementById(condition[i] + lang[j] + '_ifr').style.height = '300px';
            }
        }
     }
    jQuery("#tabs").tabs();

});

This is just the other way to set the size the main problem is why 'textarea_rows' not affect the other iframe