Skip to content

Instantly share code, notes, and snippets.

@jeffreyvr
Created September 4, 2020 09:33
Show Gist options
  • Save jeffreyvr/434fe738d9a9d074e073ec14da672e16 to your computer and use it in GitHub Desktop.
Save jeffreyvr/434fe738d9a9d074e073ec14da672e16 to your computer and use it in GitHub Desktop.
Using wp.editor in widgets

Within your widget, you can include a editor with a textarea and the class custom-widget-wp-editor.

 <textarea id="<?php echo $this->get_field_id( 'header' ); ?>" name="<?php echo $this->get_field_name( 'header' ); ?>" class="custom-widget-wp-editor"><?php echo $header; ?></textarea>

Make sure you include the JS-file within the widgets and customizer view.

/**
 * Add a fix for tinymce within widgets.
 *
 * @return void
 */
function custom_widgets_widget_editor_script() {
  global $pagenow;

  if ( 'widgets.php' === $pagenow || 'customize.php' === $pagenow ) {
    wp_enqueue_editor();

    wp_enqueue_script( 'wp-editor-widgets', get_stylesheet_directory_uri() . '/js/wp-editor-widgets.js', array( 'jquery' ), '1.0', false );
  }
}

add_action( 'admin_enqueue_scripts', 'custom_widgets_widget_editor_script' );
jQuery(document).ready(function ($) {
/**
* Removes all active editors. This is needed so they can be
* re-initialized after a widget-updated event.
*/
function custom_widgets_remove_editors() {
custom_widgets_get_editors().forEach(function (id) {
wp.editor.remove(id);
});
}
/**
* Searches the widgets areas for editors.
*
* @return array
*/
function custom_widgets_get_editors() {
let editors = [];
// Doesn't look so great, but we need to target like this to support both the regular
// widgets view and the Customizer. Also, we don't want to include the placeholder
// widget that is in the DOM on the widgets.php page.
$(document).find("#customize-theme-controls .custom-widget-wp-editor, #widgets-right .custom-widget-wp-editor").each(function () {
editors.push($(this).attr('id'));
});
return editors;
}
/**
* Initializes all wp.editor instances.
*/
function custom_widgets_set_editors() {
custom_widgets_get_editors().forEach(function (id) {
wp.editor.initialize($('#' + id).attr('id'), {
tinymce: {
wpautop: true
},
quicktags: true,
mediaButtons: true
});
});
// To prevent the editor from not submitting the value, we click the switch html tab.
$(document).contents().find('.widget-control-save').off().on('click', function (e) {
custom_widgets_get_editors().forEach(function (editor) {
let form = $('#' + editor).closest('form');
form.find('.switch-html').click();
});
});
}
// Trigger removal and setting of editors again after update or added.
$(document).on('widget-updated widget-added', function () {
custom_widgets_remove_editors();
custom_widgets_set_editors();
});
// Init.
custom_widgets_set_editors();
});
@jeffreyvr
Copy link
Author

Thanks for sharing @molcsa!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment