TinyMCE在Chrome二次打开时报错Cannot read property 'body' of null求助

Hey there, let's tackle this weird Chrome-only problem you're facing—totally get how frustrating it is when something works in Firefox but breaks in one browser on the second load. First, let's start by cleaning up your initialization code properly (fixed those escaped quotes for clarity):

tinyMCE.init({
  mode : "exact",
  elements : "email_content",
  theme : "advanced",
  theme_advanced_resizing : true,
  plugins : "autolink,lists,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
  theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|formatselect,fontselect,fontsizeselect",
  theme_advanced_buttons2 : "bullist,numlist,|,outdent,indent,|,undo,redo,|,link,unlink,anchor,code,|,forecolor,backcolor"
});

What's Likely Causing This? #

Chrome’s Back/Forward Cache (BF Cache) is the usual suspect here. When you navigate back to the page or open it a second time, Chrome keeps the previous page state (including old TinyMCE instances) to load faster. Firefox handles this cache differently, so it doesn’t trigger the conflict. Your mode: "exact" setup tries to bind to the email_content element again, but the old editor instance is still attached to it—causing weird bugs.

Fixed Solution #

The fix is simple: make sure we clean up any existing TinyMCE instances before initializing a new one, and ensure we only run the code after the DOM is fully ready. Here’s the updated code:

// Wait for the DOM to be fully loaded before touching TinyMCE
document.addEventListener('DOMContentLoaded', function() {
  // Check if an editor instance already exists for our element
  const existingEditor = tinyMCE.get('email_content');
  
  // If it does, remove it completely to avoid conflicts
  if (existingEditor) {
    existingEditor.remove();
  }

  // Now initialize the editor fresh
  tinyMCE.init({
    mode : "exact",
    elements : "email_content",
    theme : "advanced",
    theme_advanced_resizing : true,
    plugins : "autolink,lists,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
    theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|formatselect,fontselect,fontsizeselect",
    theme_advanced_buttons2 : "bullist,numlist,|,outdent,indent,|,undo,redo,|,link,unlink,anchor,code,|,forecolor,backcolor"
  });
});

Extra Checks #

• If you’re using jQuery, you can replace DOMContentLoaded with $(document).ready() instead—same effect.
• Double-check if any other script on your page is modifying the email_content element (like hiding/showing it dynamically) before TinyMCE initializes. That can also cause Chrome-specific glitches.

This should resolve the second-load issue in Chrome while keeping things working smoothly in Firefox.

内容的提问来源于stack exchange，提问作者Frank Inc