Opened 9 years ago
Closed 9 years ago
#33192 closed defect (bug) (fixed)
WYSIWYG editor Visual tab doesn't load when going from Text to Visual
Reported by: | stuartshields | Owned by: | azaozz |
---|---|---|---|
Milestone: | 4.3 | Priority: | normal |
Severity: | blocker | Version: | 4.3 |
Component: | TinyMCE | Keywords: | has-patch commit |
Focuses: | administration | Cc: |
Description
To reproduce
- Go and add a new Post or Page
- Make sure the Text tab is active, add some text and click Publish if text tab isn't active by default.
- Once saved, click on the Visual tab, the editor tools fail to load, until the Visual tab is clicked a second time and the tools load.
This was tested in Firefox 41 and Chrome Chrome 44
Results
The Visual tab doesn't load correctly when the tab is clicked on, after being in the Text tab
Expected result
Single click on the Visual tab to get it to load first time
Attachments (5)
Change History (27)
#2
@
9 years ago
Are you sure all plugins are disabled? Do you see any JavaScript errors?
@
9 years ago
The differences in the 1st click of the Visual tab and the 2nd click of the Visual tab
#3
@
9 years ago
Hi,
Yes all plugins are disabled. I've tried it on different wordpress installs on my computer at work and here at home.
From the new screenshot I attached it could be the fact that the page is refreshing to get the editor to display correctly on the 2nd click.
4.3 Beta 3 and 4 didn't have the issue at all.
#4
follow-up:
↓ 5
@
9 years ago
Do you see any JavaScript errors?
#5
in reply to:
↑ 4
@
9 years ago
Replying to iseulde:
Do you see any JavaScript errors?
No Javascript errors are given. I've tried this on two different computers.
#6
@
9 years ago
- Keywords needs-patch added
I've tested this on my RC installation, I can confirm this issue is present.
Steps:
- Edit a post/page
- Click Text, enter some text
- Click Update
- Switch to Visual
Tools don't load.
#7
@
9 years ago
It looks to be breaking as part of the build process.
Able to reproduce only on build with script_debug disabled. Running src or with script_debug runs fine.
#8
@
9 years ago
The error occurs when the build includes wp-tinymce.js.gz
. Switching from text editor to visual editor works properly if compress:tinymce
is removed from the build task.
Tested on Firefox 38/OS X and Chrome 44/OS X.
Unsure if the problem is in the gzip file or the loader wp-includes/js/tinymce/wp-tinymce.php
.
#9
@
9 years ago
- Milestone changed from Awaiting Review to 4.3
- Severity changed from normal to blocker
Confirmed in 4.3 Beta 1, RC1 and /trunk (r33525), not reproducible in 4.2, 4.1, 4.0, or 3.9
Repro steps are the same as originally provided except you need to use /build
or the .zip download package
Alternate repro: Edit any post via the Text
tab and save by clicking Update
, now click the Visual
tab
With define( 'SCRIPT_DEBUG', false );
or SCRIPT_DEBUG
not defined the compressed and concatenated TinyMCE file that should be loading for /build
is wp-tinymce.js.gz
,
See /wp-includes/class-wp-editor.php#L1199 and /wp-includes/js/tinymce/wp-tinymce.php#L29
// Load tinymce.js when running from /src, else load wp-tinymce.js.gz (production) or tinymce.min.js (SCRIPT_DEBUG)
Last related change to any of this was r32543
#10
@
9 years ago
Current thoughts are leaning towards this being an issue with the creation of wp-tinymce.js.gz
via the Grunt concat/compress tasks for the TinyMCE JS files, though the following looks correct to me.
grunt concat:tinymce --verbose
$ grunt concat:tinymce --verbose Running tasks: concat:tinymce Running "concat:tinymce" (concat) task Verifying property concat.tinymce exists in config...OK Options: separator="\n", banner="", footer="", stripBanners=false, process=undefined, sourceMap=false, sourceMapName=undefined, sourceMapStyle="embed" Reading build/wp-includes/js/tinymce/tinymce.min.js...OK Reading build/wp-includes/js/tinymce/themes/modern/theme.min.js...OK Reading build/wp-includes/js/tinymce/plugins/charmap/plugin.min.js...OK Reading build/wp-includes/js/tinymce/plugins/colorpicker/plugin.min.js...OK Reading build/wp-includes/js/tinymce/plugins/compat3x/plugin.min.js...OK Reading build/wp-includes/js/tinymce/plugins/directionality/plugin.min.js...OK Reading build/wp-includes/js/tinymce/plugins/fullscreen/plugin.min.js...OK Reading build/wp-includes/js/tinymce/plugins/hr/plugin.min.js...OK Reading build/wp-includes/js/tinymce/plugins/image/plugin.min.js...OK Reading build/wp-includes/js/tinymce/plugins/lists/plugin.min.js...OK Reading build/wp-includes/js/tinymce/plugins/media/plugin.min.js...OK Reading build/wp-includes/js/tinymce/plugins/paste/plugin.min.js...OK Reading build/wp-includes/js/tinymce/plugins/tabfocus/plugin.min.js...OK Reading build/wp-includes/js/tinymce/plugins/textcolor/plugin.min.js...OK Reading build/wp-includes/js/tinymce/plugins/wordpress/plugin.min.js...OK Reading build/wp-includes/js/tinymce/plugins/wpautoresize/plugin.min.js...OK Reading build/wp-includes/js/tinymce/plugins/wpdialogs/plugin.min.js...OK Reading build/wp-includes/js/tinymce/plugins/wpeditimage/plugin.min.js...OK Reading build/wp-includes/js/tinymce/plugins/wpemoji/plugin.min.js...OK Reading build/wp-includes/js/tinymce/plugins/wpgallery/plugin.min.js...OK Reading build/wp-includes/js/tinymce/plugins/wplink/plugin.min.js...OK Reading build/wp-includes/js/tinymce/plugins/wptextpattern/plugin.min.js...OK Reading build/wp-includes/js/tinymce/plugins/wpview/plugin.min.js...OK Writing build/wp-includes/js/tinymce/wp-tinymce.js...OK File build/wp-includes/js/tinymce/wp-tinymce.js created. Done, without errors.
grunt compress:tinymce --verbose
grunt compress:tinymce --verbose Running tasks: compress:tinymce Running "compress:tinymce" (compress) task Verifying property compress.tinymce exists in config...OK Files: build/wp-includes/js/tinymce/wp-tinymce.js -> build/wp-includes/js/tinymce/wp-tinymce.js.gz Options: archive=null, mode="gzip", level=9 Created build/wp-includes/js/tinymce/wp-tinymce.js.gz (146870 bytes)
#12
follow-up:
↓ 13
@
9 years ago
Still cannot reproduce here neither from /build nor from clean RC1 install...
I doubt this is build tools related. More likely to be script load order related (i.e. a consequence of concatenating the scripts or loading them faster).
A question for the people that can reproduce: after you switch to Visual and the editor doesn't show, is the TinyMCE instance missing (TinyMCE is not initialized) or it is there but set to "hidden"? To test, run these in the console:
tinymce.activeEditor; // should show the editor instance, `null` if not initialized
If this is present, run:
tinymce.activeEditor.isHidden();
#13
in reply to:
↑ 12
;
follow-up:
↓ 14
@
9 years ago
Replying to azaozz:
In console:
tinymce.activeEditor // editor object tinymce.activeEditor.isHidden() // true tinymce.activeEditor.show() // reveals editor
Still cannot reproduce here neither from /build nor from clean RC1 install...
I can reproduce locally on 4.3-RC1-33526 built from develop.git.wordpress.org.
Additionally, locally I have tried the following without success:
- Manually ordering
tinymce:concat
to match load order withSCRIPT_DEBUG
enabled:BUILD_DIR + 'wp-includes/js/tinymce/tinymce.min.js', BUILD_DIR + 'wp-includes/js/tinymce/plugins/compat3x/plugin.min.js', BUILD_DIR + 'wp-includes/js/tinymce/themes/modern/theme.min.js', BUILD_DIR + 'wp-includes/js/tinymce/plugins/charmap/plugin.min.js', BUILD_DIR + 'wp-includes/js/tinymce/plugins/colorpicker/plugin.min.js', BUILD_DIR + 'wp-includes/js/tinymce/plugins/hr/plugin.min.js', BUILD_DIR + 'wp-includes/js/tinymce/plugins/lists/plugin.min.js', BUILD_DIR + 'wp-includes/js/tinymce/plugins/media/plugin.min.js', BUILD_DIR + 'wp-includes/js/tinymce/plugins/paste/plugin.min.js', BUILD_DIR + 'wp-includes/js/tinymce/plugins/tabfocus/plugin.min.js', BUILD_DIR + 'wp-includes/js/tinymce/plugins/textcolor/plugin.min.js', BUILD_DIR + 'wp-includes/js/tinymce/plugins/fullscreen/plugin.min.js', BUILD_DIR + 'wp-includes/js/tinymce/plugins/wordpress/plugin.min.js', BUILD_DIR + 'wp-includes/js/tinymce/plugins/wpautoresize/plugin.min.js', BUILD_DIR + 'wp-includes/js/tinymce/plugins/wpeditimage/plugin.min.js', BUILD_DIR + 'wp-includes/js/tinymce/plugins/wpemoji/plugin.min.js', BUILD_DIR + 'wp-includes/js/tinymce/plugins/wpgallery/plugin.min.js', BUILD_DIR + 'wp-includes/js/tinymce/plugins/wplink/plugin.min.js', BUILD_DIR + 'wp-includes/js/tinymce/plugins/wpdialogs/plugin.min.js', BUILD_DIR + 'wp-includes/js/tinymce/plugins/wptextpattern/plugin.min.js', BUILD_DIR + 'wp-includes/js/tinymce/plugins/wpview/plugin.min.js', BUILD_DIR + 'wp-includes/js/tinymce/plugins/*/plugin.min.js'
- Manually unzipping
wp-tinymce.js.gz
and including the unzipped file
- Forcing
wp-tinymce.php
to loadtinymce.min.js
and the concat3x plugin only - this works but is not a practical solution.
#14
in reply to:
↑ 13
;
follow-ups:
↓ 15
↓ 17
@
9 years ago
- Keywords has-patch needs-testing added; needs-patch removed
Replying to peterwilsoncc:
tinymce.activeEditor // editor object tinymce.activeEditor.isHidden() // true tinymce.activeEditor.show() // reveals editor
33192.patch should fix it. This bit was intended for initializing MCE in the background to speed up loading when the Text editor is first. Not used by default.
Could you confirm if it works? :)
#15
in reply to:
↑ 14
;
follow-up:
↓ 16
@
9 years ago
Hi, I can't get your patch to do anything. When I ran tinymce.activeEditor
in the console, when the Visual tab is first clicked going from the Text tab, I can see this in console when running tinymce.activeEditor:
formatter: Object
hasVisual: true
hidden: true
id: "content"
But when the Visual tab is first loaded the same Object is this:
formatter: Object
hasVisual: true
hidden: false
id: "content"
Could this be causing said problem?
Replying to azaozz:
Replying to peterwilsoncc:
tinymce.activeEditor // editor object tinymce.activeEditor.isHidden() // true tinymce.activeEditor.show() // reveals editor33192.patch should fix it. This bit was intended for initializing MCE in the background to speed up loading when the Text editor is first. Not used by default.
Could you confirm if it works? :)
#16
in reply to:
↑ 15
@
9 years ago
Had to do a hard browser refresh and the patch worked. Ignore my last comment.
Replying to stuartshields:
Hi, I can't get your patch to do anything. When I ran
tinymce.activeEditor
in the console, when the Visual tab is first clicked going from the Text tab, I can see this in console when running tinymce.activeEditor:
formatter: Object hasVisual: true hidden: true id: "content"
But when the Visual tab is first loaded the same Object is this:
formatter: Object hasVisual: true hidden: false id: "content"
Could this be causing said problem?
Replying to azaozz:
Replying to peterwilsoncc:
tinymce.activeEditor // editor object tinymce.activeEditor.isHidden() // true tinymce.activeEditor.show() // reveals editor33192.patch should fix it. This bit was intended for initializing MCE in the background to speed up loading when the Text editor is first. Not used by default.
Could you confirm if it works? :)
#17
in reply to:
↑ 14
@
9 years ago
Replying to azaozz:
33192.patch should fix it.
Could you confirm if it works? :)
Yep, 33192.patch works for me.
This ticket was mentioned in Slack in #core by netweb. View the logs.
9 years ago
#21
@
9 years ago
33192.patch works as expected.
Make sure that the Text tab is selected and saved so the page loads the text tab first