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

[patkemper]

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

[mayanktripathi32]

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

[benediktgrether]

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.

[samw1]

Hi all! 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!

[phanner]

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

[adrien3763]

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

[romainmrhenry]

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.

[karmatosed]

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.

[tw1l1ght]

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).

[About2press]

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

[FranklynJones]

Yes, I'm having the exact same issue. SCF or ACF with Guttenberg enabled. Same JS error. Only way around it is to enable Delay Initialization on the field in ACF/SCF. WP 6.8.1 This is happening to me in Chrome too. Rolled back to 6.6.2

---

The TinyMCE editor fails to initialise properly when using a combination of Gutenberg, and SCF/ACF WYSIWYG fields. On page load the Visual Tab is empty, if you switch back from Text to Visual the JS console produces the following error:

wp-tinymce.js?ver=49110-20201110:3 Uncaught TypeError: Cannot read properties of null (reading 'setBaseAndExtent')
    at i (wp-tinymce.js?ver=49110-20201110:3:291936)
    at Object.each (wp-tinymce.js?ver=49110-20201110:3:1346)
    at Object.select (wp-tinymce.js?ver=49110-20201110:3:293163)
    at _ (editor.min.js?ver=6.8.1:2:5063)
    at n (editor.min.js?ver=6.8.1:2:1731)
    at HTMLDocument.<anonymous> (editor.min.js?ver=6.8.1:2:248)
    at C (wp-tinymce.js?ver=49110-20201110:3:10800)
    at HTMLDocument.d (wp-tinymce.js?ver=49110-20201110:3:10946)
i @ wp-tinymce.js?ver=49110-20201110:3
each @ wp-tinymce.js?ver=49110-20201110:3
select @ wp-tinymce.js?ver=49110-20201110:3
_ @ editor.min.js?ver=6.8.1:2
n @ editor.min.js?ver=6.8.1:2
(anonymous) @ editor.min.js?ver=6.8.1:2
C @ wp-tinymce.js?ver=49110-20201110:3
d @ wp-tinymce.js?ver=49110-20201110:3Understand this error

Rolling back to 6.6.2 resolves the issue, as does using ClassicEditor plugin.

[sabernhardt]

#63691 was marked as a duplicate.

[luminuu]

I can confirm this behaviour with the exact same error message Uncaught TypeError: Cannot read properties of null (reading 'setBaseAndExtent') on a 6.8.2 install, with the block editor active and custom fields with TinyMCE are used on the post.

[fischfood]

Also confirming same behavior through TinyMCE within Advanced Custom Fields, as a WYSIWYG within a tab. Same console error, Uncaught TypeError: Cannot read properties of null (reading 'setBaseAndExtent').

It doesn't always happen, but does trigger more frequently after a cache clear.

WordPress: 6.8.2
ACF Pro 6.5.0.1

[danidada]

Any news about this? Anyone has a workaround? The problem it's still there...

[dfranz1]

Having the same problem here. Using ACF WYSIWYG Fields mixed with Gutenberg, breaks the WYSIWYG field randomly with the stated Javascript error. This makes content editing a chore and not user friendly. This needs to be fixed.

[danidada]

Replying to dfranz1:

Having the same problem here. Using ACF WYSIWYG Fields mixed with Gutenberg, breaks the WYSIWYG field randomly with the stated Javascript error. This makes content editing a chore and not user friendly. This needs to be fixed.

Hello dfranz! Just sharing the only workaround that I have found: go to the acf/scf field setting and enable delay initialization. It won't load before click but it will work as expected.