Make WordPress Core

Opened 2 years ago

Last modified 6 months ago

#20264 new defect (bug)

WP_Editor unexpected behavior/bug when used in widget

Reported by: niklasbr Owned by:
Milestone: Awaiting Review Priority: normal
Severity: major Version: 3.3.1
Component: TinyMCE Keywords:
Focuses: Cc:


Creating a bare bones widget using the wp_editor() function only returns a non-functioning editor (a few times no editor at all). Using the setting teeny => true results in a javascript error where wp_editor will try to load /wp-includes/js/tinymce/themes/simple/editor_template.js (which does not exist).

A demo video of this behavior can be found here: https://vimeo.com/38863361

This is the demo code:

add_action('widgets_init', 'my_widgets_add');
function my_widgets_add() {
class my_wysiwyg_widget extends \WP_Widget {
    function __construct() {
        $widget_ops = array('classname' => 'my_wysiwyg_widget', 'description' => __('My WYSIWYG Widget'));
        $control_ops = array('width' => 650, 'height' => 350);
        parent::__construct(false, __("My WYSIWYG Widget"), $widget_ops, $control_ops);
    function form() {
        // Create a TinyMCE editor
            $editor_id = "unique_id_goes_here", 
            $settings = array(
            'textarea_name' => "unique_name_goes_here",
            'textarea_rows' => 7,
            teeny => false));
    function update($new_instance, $old_instance) {
        // Save data later
        $instance = $old_instance;
        return $instance;
    function widget($args, $instance) {
        // print later

Change History (6)

comment:1 niklasbr2 years ago

  • Summary changed from WP_Editor to WP_Editor unexpected behavior/bug when used in widget

comment:2 ocean902 years ago

Related: #20181

comment:3 toscho2 years ago

  • Cc info@… added

comment:4 azaozz2 years ago

Unfortunately TinyMCE cannot be moved in the DOM once it's initialized. That makes it impossible to use wp_editor() directly in a widget.

Was thinking to add another method to wp_editor() that would make it work in two steps:

  • first enqueue scripts and output the hidden html for the dialogs (all that goes at the bottom of the page),
  • second output the html around the editor and some JS to initialize it, leaving out the actual init call so it can be initialized on bemand.

That would make it possible to add the editor with ajax too.

comment:5 onetarek17 months ago

TinyMCE Editor is not shown in given height. I set the 'textarea_rows'=>15, but it is showing only 5 always. I set the CSS height 600px , then it is showing same also.

comment:6 westonruter6 months ago

  • Cc weston@… added
Note: See TracTickets for help on using tickets.