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:
- A custom control for the Customizer. We create this by extending the
WP_Customize_Control
class. - Some jQuery code to initialize the TinyMCE editor and trigger saving.
- 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!