Make WordPress Core

Opened 8 years ago

Closed 7 years ago

#39248 closed defect (bug) (invalid)

TinyMCE JavaScript editor is broken in 4.7

Reported by: argonius's profile argonius Owned by:
Milestone: Priority: normal
Severity: normal Version: 4.7
Component: TinyMCE Keywords: close 2nd-opinion
Focuses: ui, javascript, administration Cc:

Description

TinyMCE JavaScript editor API does not work as expected in 4.7. It works in 4.6.

Steps to reproduce:

  1. Add following code to your admin panel:
function my_editor(){
	wp_editor( '', 'myeditor', array(
	    'textarea_name' => 'mytextarea'
	) );
}
add_action( 'admin_head', 'my_editor' );
  1. Open browser's console and type in:
tinyMCE.activeEditor

Expected: Returns JavaScript object (like in 4.6)
Actual: Returns null

Note: You can also test with tinyMCE.editors, it's empty array in 4.7 e.g. "[]", but it should contain 1 item.

Attachments (1)

tiny.php (363 bytes) - added by argonius 8 years ago.
Plugin for testing this issue. Activate the plugin and open browser's console to test

Download all attachments as: .zip

Change History (6)

@argonius
8 years ago

Plugin for testing this issue. Activate the plugin and open browser's console to test

#1 @argonius
8 years ago

  • Keywords needs-patch added

#2 @argonius
8 years ago

From the latest testing, there is a different scenario to reproduce. It is reproducible in both 4.6 and 4.7 in the following conditions:

--- Working scenario

  1. Click on edit button on any post.
  2. Make sure to select "Visual" tab option on the top right corner of the editor
  3. Open browser's console and type in "tinyMCE.activeEditor", it's set correctly
  4. Refresh page, tinyMCE.activeEditor is still OK

--- Continue to reproduce the Issue

  1. Click on "Text" tab option on the top right corner
  2. tinyMCE.activeEditor is still OK
  3. Refresh the page
  4. tinyMCE.activeEditor is null (Issue)

The problem happens when you load the page with text editor, after you have pre-selected mode to "Text" in previous page load.

Please disregard the attached plugin, since it can be reproduced in both WP versions.

#3 follow-up: @azaozz
8 years ago

  • Keywords close added; needs-patch removed

The problem happens when you load the page with text editor, after you have pre-selected mode to "Text" in previous page load.

When the Text editor loads first, TinyMCE is not initialized until the user switches to Visual. This has always worked that way, hasn't changed since 2.5 (or even earlier).

It is done that way because:

  • There is no good way to initialize TinyMCE "hidden". There is always a flicker and some delay on page load. Also often there are errors in certain browsers with some components like iframes in wpviews, etc.
  • The page loads faster when the initialization of TinyMCE is postponed (despite that it is usually loaded in the footer).

I'm not sure what you need to do on loading the editor but there are few different custom events you can use. One is tinymce.on( 'addEditor', function( event ) { var editor = event.editor... the other is WordPress specific $( document ).on( 'tinymce-editor-init', function( editor ) { ....

Last edited 8 years ago by azaozz (previous) (diff)

#4 in reply to: ↑ 3 @argonius
8 years ago

  • Keywords 2nd-opinion added

That makes sense, thanks for clarifications.

I found an alternative solution that allows me to force TinyMCE view by default, but it's just a hack:

if(!tinyMCE.activeEditor)jQuery('.wp-editor-wrap .switch-tmce').trigger('click');

It would be more convenient to have methods on TinyMCE object for checking current view state, as well as support for switching to a desired state programmatically. If you think that this might be a good idea for improvement, it would be nice to have another ticket for that, otherwise, I'm fine to close this one.

Thanks for the help!

#5 @azaozz
7 years ago

  • Milestone Awaiting Review deleted
  • Resolution set to invalid
  • Status changed from new to closed

There are already quite a few ways. Which editor loads first is controlled by the editor user setting. You can change/override it before TinyMCE is initialized:

window.setUserSetting( 'editor', 'tinymce' );

Once it is initialized, you can do editor.isHidden() to see which is currently being used.

Note: See TracTickets for help on using tickets.