Adding a TinyMCE Editor in the WordPress Customizer

Earlier this year, I figured out a nice and clean way to include the TinyMCE editor in the WordPress Customizer. Let’s do it together, shall we? This is a combination of a bunch of research, reading old tutorials, and looking at code. Enjoy!

Prerequisites

• You should have a decent grasp of PHP.
• You should have a decent understanding of how to add settings and controls to the WordPress Customizer.

---

There are 3 parts to adding the TinyMCE editor to the WordPress Customizer:

1. A custom control for the Customizer. We create this by extending the WP_Customize_Control class.
2. Some jQuery code to initialize the TinyMCE editor and trigger saving.
3. Adding the control (and setting) the the Customizer.

Creating a Custom TinyMCE Control

<?php
/**
* TinyMCE Custom Control
*
* @author Aurooba Ahmed <https://aurooba.com>
* @license http://www.gnu.org/licenses/gpl-2.0.html
*
*/
class AuroobaMakes_TinyMCE_Custom_Control extends WP_Customize_Control {
	/**
	 * The type of control being rendered
	 */
	public $type = 'tinymce_editor';
	/**
	 * Enqueue our scripts and styles
	 */
	public function enqueue() {
		wp_enqueue_script( 'aurooba-makes-customizer-js', plugins_url( 'aurooba-makes-customizer.min.js', __FILE__ ), 'jquery', filemtime( plugin_dir_path( __FILE__ ) . 'aurooba-makes-customizer.min.js' ), true );

		wp_enqueue_editor();
	}
	/**
	 * Pass our TinyMCE toolbar config to JavaScript
	 */
	public function to_json() {
		parent::to_json();

		$this->json['auroobamakes_tinymce_toolbar1'] = isset( $this->input_attrs['toolbar1'] ) ? esc_attr( $this->input_attrs['toolbar1'] ) : 'bold italic bullist numlist alignleft aligncenter alignright link';

		$this->json['auroobamakes_tinymce_toolbar2'] = isset( $this->input_attrs['toolbar2'] ) ? esc_attr( $this->input_attrs['toolbar2'] ) : '';

		$this->json['auroobamakes_tinymce_mediabuttons'] = isset( $this->input_attrs['mediaButtons'] ) && ( $this->input_attrs['mediaButtons'] === true ) ? true : false;

		$this->json['auroobamakes_tinymce_height'] = isset( $this->input_attrs['height'] ) ? esc_attr( $this->input_attrs['height'] ) : 200;
	}
	/**
	 * Render the control in the customizer
	 */
	public function render_content() {
		?>
		<div class="tinymce-control">
			<span class="customize-control-title">
				<?php echo esc_html( $this->label ); ?>
			</span>

			<?php if ( ! empty( $this->description ) ) { ?>
				<span class="customize-control-description">
					<?php echo esc_html( $this->description ); ?>
				</span>
			<?php } ?>

			<textarea id="<?php echo esc_attr( $this->id ); ?>" class="customize-control-tinymce-editor" <?php $this->link(); ?>><?php echo esc_attr( $this->value() ); ?></textarea>
		</div>
		<?php
	}
    }
}

Initialize TinyMCE Editor with jQuery

Now we initialize the TinyMCE Editor with the settings passed through the class in our aurooba-makes-customizer.js (which is included after minifiying and becomes aurooba-makes-customizer.min.js).

I do the $ here, don’t judge, one day I’ll clean up this code and make it better.

function ( $ ) {
	/**
	 * TinyMCE Custom Control
	 *
	 * @author Aurooba Ahmed
	 * @license http://www.gnu.org/licenses/gpl-2.0.html
	 *
	 */
	function tinyMCE_setup() {
		// Get the toolbar strings that were passed from the PHP Class
		var tinyMCEToolbar1 = _wpCustomizeSettings.controls[$( this ).attr( 'id' )].auroobamakes_tinymce_toolbar1;

		var tinyMCEToolbar2 = _wpCustomizeSettings.controls[$( this ).attr( 'id' )].auroobamakes_tinymce_toolbar2; // Get the media button condition passed from the PHP Class


		var tinyMCEMediaButtons = _wpCustomizeSettings.controls[$( this ).attr( 'id' )].auroobamakes_tinymce_mediabuttons; // Get the editor height passed from the PHP Class


		var tinyMCEheight = _wpCustomizeSettings.controls[$( this ).attr('id')].auroobamakes_tinymce_height; // Initialize editor with passed settings

		// initialize with unique ID (so you can have multiple) and with all the settings attributed correctly
		wp.editor.initialize( $( this ).attr( 'id' ), {
		tinymce: {
			wpautop: true,
			toolbar1: tinyMCEToolbar1,
			toolbar2: tinyMCEToolbar2,
			height: tinyMCEheight
		},
		quicktags: true,
		mediaButtons: tinyMCEMediaButtons
		});
	}
  
	function initialize_tinyMCE(event, editor) {
		editor.on( 'change', function () {
		tinyMCE.triggerSave();
		$( "#".concat( editor.id ) ).trigger( 'change' );
		});
	}
  
	function init() {
		$( document ).on( 'tinymce-editor-init', initialize_tinyMCE );
		$( '.customize-control-tinymce-editor' ).each( tinyMCE_setup );
	}
  
	$( document) .on( 'ready', init );
  }( jQuery, wp.customize );

Add a TinyMCE Control to our Customizer Settings

I’m assuming you know how to add a regular control here.

I’ve used shorthand array declaration [] here – you’ll want to change that if you’re following strict WordPress standards.

<?php
$wp_customize->add_control( new AuroobaMakes_TinyMCE_Custom_Control(
	$wp_customize,
	'my_cool_wysiwyg',
	[
		'label'       => __( 'My Cool Text', 'innovelc' ),
		'description' => __( 'This text will appear in all places cool!', 'auroobamakes' ),
		'section'     => 'my_cool_section',
		'input_attrs' => [
			'toolbar1'     => 'formatselect bold italic link bullist',
			'mediaButtons' => false,
			'height'       => 200,
		]
	]
) );

$wp_customize->add_setting( 'my_cool_wysiwyg',
	[
	'default'           => '',
	'transport'         => 'refresh',
	'sanitize_callback' => 'wp_kses_post'
	]
);

Thank you @daljo628 for asking me about this tutorial, which prompted me to publish it!

If you liked this tutorial sign up for the newsletter and I’ll send you more helpful tutorials!