Make WordPress Core

Opened 8 months ago

Last modified 4 weeks ago

#62450 reopened defect (bug)

TinyMCE editor doesn't load properly when initializing on Visual Tab (Firefox) [again]

Reported by: patkemper's profile patkemper Owned by:
Milestone: Awaiting Review Priority: normal
Severity: major Version: 6.7
Component: TinyMCE Keywords: reporter-feedback needs-test-info needs-screenshots
Focuses: javascript, administration Cc:

Description

This issue had been fixed a few years ago. Now with WP 6.7 the issue reappeared.

I'll just copy-paste the original description (thanks to metalandcoffee):
"TinyMCE editors within my custom metaboxes will sometimes fail to load/initialize when using the Firefox browser. This only happens when the editor is initializing on the Visual tab. If I switch to the Text tab and then reload the page, the editor initializing normally."

Original ticket:
https://core.trac.wordpress.org/ticket/52133

Changeset that fixed the issue back in 2021:
https://core.trac.wordpress.org/changeset/51082

Change History (10)

#1 @mayanktripathi32
8 months ago

  • Keywords reporter-feedback needs-testing-info close needs-screenshots added; needs-patch removed
  • Resolution set to worksforme
  • Severity changed from major to normal
  • Status changed from new to closed

Hello Patkemper,

I attempted to replicate the issue using a fresh installation of version 6.7. However, everything seems to be functioning as expected. The editor loaded successfully in visual mode without any problems on my end.

I have attached a screencast for the same: https://streamable.com/ynxovp

If the issue persists on your side, could you kindly share a video recording of the problem along with the relevant code for the metafield? This will help in diagnosing the issue more effectively.

Best regards,
Mayank

#2 @benediktgrether
7 months ago

  • Resolution worksforme deleted
  • Status changed from closed to reopened

Hi everyone.

Our client manages their website independently and uses SCF (Secure Custom Fields) with WYSIWYG editor fields to input content.

Problem:
When switching between the "Text" and "Visual Editor" tabs, all content disappears, and the text box remains empty (white). This significantly impacts the ability to edit content.

Console Error:
The following error appears in the browser's developer console:

Uncaught TypeError: can't access property "setBaseAndExtent", n is null
tinymce.min.js:2:291933

Here is a Screen Record.
https://go.screenpal.com/watch/cZXtjXnV7GL

Steps to Reproduce:

Log in to the WordPress admin panel.
Edit an SCF field with a WYSIWYG editor.
Switch between the "Text" and "Visual Editor" tabs.
Notice that the content disappears, leaving an empty text box.
Expected Behavior:
The content in the WYSIWYG field should not disappear when switching between "Text" and "Visual Editor."

Additional Information:

WordPress Version: 6.7.1
SCF Version: 6.3.10.2
Browser and Version: Firefox Developer Edition - Version 134.0b1 (64-Bit) | Firefox Edition - Version 131.0 (64-Bit) (Both are affected).

We kindly request support to analyze and resolve this issue.
Benedikt.

#3 @samw1
6 months ago

Hi all! Following @patkemper thread, I am also experiencing the same error as @benediktgrether with TinyMCE editor after upgrading to WordPress 6.7. The visual tab does not work, it looks empty and I'm not able to view or edit text. Switching to the text tab allows me to view the code but Visual tab remains blank. This happens on Firefox and Chrome incognito.

I've followed all the recommended debug steps or uninstalling plugins, switching to core theme, cleared both browser and server caches, updated browsers versions and the problem persists.

Rolling back to WordPress 6.6.2 solved the problem.

Any chance this issue will be resolved on the next update?
Thanks!

Last edited 6 months ago by samw1 (previous) (diff)

#4 @phanner
6 months ago

Hi, I'm also experiencing exactly the same error as described by @benediktgrether. It would be great if you could take a look!

best
Peter

Last edited 6 months ago by phanner (previous) (diff)

#5 @adrien3763
2 months ago

  • Component changed from Editor to TinyMCE
  • Severity changed from normal to major

I'm experiencing exactly the same bug on several WordPress sites. When updating from version 6.6.2 to 6.7, on Firefox, the ACF (PRO) WYSIWYG fields randomly (or at least I haven't identified the exact trigger) display no content in visual mode. In text mode, the content is there, but when switching back to visual mode, it disappears, and the well-known JS console error appears.

I've updated both WordPress and ACF PRO, but the issue is still present.

WP : 6.8
ACF PRO : 6.3.12

Last edited 2 months ago by adrien3763 (previous) (diff)

#6 @romainmrhenry
2 months ago

Facing the same issue.
It seems that loading order/speed is relevant.

When JavaScript resources are loaded more slowly (for example by disabling browser cache) the WYSIWYG fields work as expected.

On very small pages without much content everything also seems to work as expected.

So it seems as if something happened in WordPress 6.7 where the order of loading and execution is different and fields lower on the page aren't initialized properly.

This is a very major issue for us.

#7 @wordpressdotorg
2 months ago

  • Keywords needs-test-info added; needs-testing-info removed

#8 @karmatosed
6 weeks ago

  • Keywords close removed

I feel like the 'close' label might need to be removed considering that people are saying this is an issue and we need to get this tested again.

#9 @tw1l1ght
5 weeks ago

Hi,

I got the same problems, but with JetEngine's WYSIWYG field (which is using the WP TinyMCE script) on Firefox.

Latest version of WP (6.8.1) and JetEngine (3.6.9).

#10 @About2press
4 weeks ago

I have got the same console error in Modern Events Calendar which also uses TinyMCE in its text fields:

Uncaught TypeError: can't access property "setBaseAndExtent", n is null
    i /wp-includes/js/tinymce/wp-tinymce.js?ver=49110-20201110:3
    each /wp-includes/js/tinymce/wp-tinymce.js?ver=49110-20201110:3
    select /wp-includes/js/tinymce/wp-tinymce.js?ver=49110-20201110:3
    _ /wp-admin/js/editor.min.js?ver=6.7.2:2
    switchEditors /wp-admin/js/editor.min.js?ver=6.7.2:2
    jQuery 4
    <anonymous> /wp-includes/js/tinymce/wp-tinymce.js?ver=49110-20201110:33
    jQuery 2
4 wp-tinymce.js:3:291933
    i /wp-includes/js/tinymce/wp-tinymce.js?ver=49110-20201110:3
    each /wp-includes/js/tinymce/wp-tinymce.js?ver=49110-20201110:3
    select /wp-includes/js/tinymce/wp-tinymce.js?ver=49110-20201110:3
    _ /wp-admin/js/editor.min.js?ver=6.7.2:2
    switchEditors /wp-admin/js/editor.min.js?ver=6.7.2:2
    jQuery 4
    <anonym> /wp-includes/js/tinymce/wp-tinymce.js?ver=49110-20201110:33
    jQuery 2
Note: See TracTickets for help on using tickets.