"wp_editor" not displaying TinyMCE correctly when square brackets used in name

Question

I'm creating a custom options page and I have a textarea that I've turned into a TinyMCE editor using wp_editor.

TinyMCE displays correctly, however it breaks when I include square brackets in the $id. Here's the code I'm using for the add_settings_field function callback:

function px_wp_editor($args){
        $options    = get_option('theme_options');  
        $value      = $options['px_wp_editor'];
        $id         = 'theme_options[px_wp_editor]';

         extract( $args );
         $class = (!empty($class))?$class:'';

         $settings = array(
            'textarea_rows'     => 12,
            'textarea_name'     => $id, 
            'editor_class'      => $class,
            'media_buttons'     => true,
            'tinymce'           => true
         );
         wp_editor($value, $id, $settings );            
    }

If I removed the square brackets from the $id value then it displays fine. However, because of the way I'm retrieving the values using get_option, I need to call "textarea_name" as it currently is, with square brackets.

The first pic below is how it looks when using square brackets for the name (full icons don't display correctly and there are no Visual/Text buttons.

The second pic is how it should display.

Answer 1

You cannot put square brackets as editor id. but you can change textarea name by.

wp_editor('','px_wp_editor',array('textarea_name' => 'theme_options[px_wp_editor]'));

the important part is, "id" and "textarea_name" are different.

Answer 2

I'm not able to test this right now, but try this:

$id = htmlentities('theme_options[px_wp_editor]');