Tips and tricks

I am writing this article because I have not found any relevant information on how to add a WP Editor field in the Theme Customizer.

I DID find relevant information on the matter on http://themefoundation.com/wordpress-theme-customizer/ and of course in the WordPress Codex http://codex.wordpress.org/Function_Reference/wp_editor but nothing to combine the two.

So we will begin…

add this to your function.php theme file

add_action( 'customize_register', 'your_customizer' );
function your_customizer( $wp_customize ) {

	$wp_customize->add_section(
		'appearance_settings',
		array(
			'title' => __('Appearance Settings'),
			'description' => __('Modify design options'),
			'priority' => 120,
		)
	);


	$wp_customize->add_setting( 'footer_content',
		array(
			'default'=>'default text'
		));

	$wp_customize->add_control(
		new Example_Customize_Editor_Control(
			$wp_customize,
			'footer_content',
			array(
				'label' => 'Footer content',
				'section' => 'appearance_settings',
				'settings' => 'footer_content'
			)
		)
	);
}

You might notice that Example_Customize_Editor_Control is a custom class. We must define it too. Append this too to function.php

if(class_exists('WP_Customize_Control')){

	class Example_Customize_Editor_Control extends WP_Customize_Control {
		public $type = 'textarea';

		public function render_content() {
			?>
			
				label ); ?>

				value();
				$editor_id = $this->id;
				$settings = array( 'media_buttons' => true, 'drag_drop_upload'=>true );

				wp_editor( $content, $editor_id, $settings );

				?>
			
		
Now we have the editor in the Theme Customizer, but if you try to add text you will see that the Save button does not even respond to editing the field. That's because it only responds to textareas, inputs with the attribute data-customize-setting-link="theid". Because the textarea is generator by the wp_editor function and the wp_editor function does not have an option to add custom attributes to the textarea, we must do the job via javascript.
Note: The information here - http://codex.wordpress.org/Theme_Customization_API is wrong. On step 3 it says
to ensure that the file is loaded only on the Theme Customizer admin screen (and not your live website), you should use the customize_preview_init hook.
But that is not the right hook. That loads into the actual preview not the admin UI. You actually need customize_controls_enqueue_scripts hook. 

function your_customize_backend_init(){

	wp_enqueue_script('your_theme_customizer', get_template_directory_uri.'/customizer/customizer.js');
}
add_action( 'customize_controls_enqueue_scripts', 'your_customize_backend_init' );

create the customizer.js in a customizer folder in your theme
jQuery(document).ready(function($){
    $('textarea[name="footer_content"]').attr('data-customize-setting-link','footer_content');

    setTimeout(function(){

        var editor2 = tinyMCE.get('footer_content');


        if(editor2){
            editor2.onChange.add(function (ed, e) {
                // Update HTML view textarea (that is the one used to send the data to server).

                ed.save();

                $('textarea[name="footer_content"]').trigger('change');
            });
        }
    },1000);
})

The timeout function actually does convert the Visual Editor content into the textarea and a timeout is required because the tinymce field is not available right away.