[wp-trac] [WordPress Trac] #62450: TinyMCE editor doesn't load properly when initializing on Visual Tab (Firefox) [again]

[WordPress Trac]

#62450: TinyMCE editor doesn't load properly when initializing on Visual Tab
(Firefox) [again]
-------------------------------------+-------------------------------------
 Reporter:  patkemper                |       Owner:  (none)
     Type:  defect (bug)             |      Status:  reopened
 Priority:  normal                   |   Milestone:  Awaiting Review
Component:  TinyMCE                  |     Version:  6.7
 Severity:  major                    |  Resolution:
 Keywords:  reporter-feedback        |     Focuses:  javascript,
  needs-test-info needs-screenshots  |  administration
-------------------------------------+-------------------------------------

Comment (by trepidation.co.uk):

 Here is a workaround for people with the same issue
 note it doesn't work for toggling back and forth between Visual and Text
 editor


 in your theme functions.php
 {{{#!php
 <?php
 add_action( 'acf/input/admin_enqueue_scripts', function () {
     wp_enqueue_script(
         'acf-wysiwyg-fix',
         get_stylesheet_directory_uri() . '/js/acf-wysiwyg-fix.js',
         array( 'acf-input' ), // IMPORTANT dependency
         '1.0',
         true
     );
 });
 }}}

 then create this file/folder
 /js/acf-wysiwyg-fix.js
 with this code

 {{{
 (function($){

   if (typeof acf === 'undefined') return;

   function initFieldTinyMCE(field) {
     if (!field || !field.$el) return;

     const textarea = field.$el.find('textarea.wp-editor-area');
     if (!textarea.length) return;

     const editorId = textarea.attr('id');
     if (!editorId) return;

     // Wait until TinyMCE exists
     if (typeof tinymce === 'undefined') {
       setTimeout(function(){
         initFieldTinyMCE(field);
       }, 50);
       return;
     }

     // Already initialized → do nothing
     if (tinymce.get(editorId)) return;

     // WP config not ready → bail safely
     if (
       !window.tinyMCEPreInit ||
       !tinyMCEPreInit.mceInit ||
       !tinyMCEPreInit.mceInit[editorId]
     ) {
       console.warn('TinyMCE config missing for', editorId);
       return;
     }

     tinymce.init(tinyMCEPreInit.mceInit[editorId]);
   }

   $(document).on('click', '.wp-switch-editor.switch-tmce', function(e){

     const $wrap = $(this).closest('.wp-editor-wrap');
     const $acfField = $wrap.closest('.acf-field');

     if (!$wrap.length || !$acfField.length) return;

     const field = acf.getField($acfField);
     if (!field || field.get('type') !== 'wysiwyg') return;

     // 🚫 Stop WordPress core BEFORE it crashes
     e.preventDefault();
     e.stopImmediatePropagation();

     console.warn('Intercepted Visual tab to avoid TinyMCE crash');

     // Manually switch UI state
     $wrap.removeClass('html-active').addClass('tmce-active');

     // Initialize TinyMCE safely
     setTimeout(function(){
       initFieldTinyMCE(field);
     }, 60);
   });

 })(jQuery);
 }}}

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/62450#comment:19>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform