Javascript – TinyMCE Draws Okay, But Won’t Let Me Type In It. In FF, Buttons Have Error: Component returned failure code: 0x80004005


In previous applications, I was able to get TinyMCE to work just fine. But in this web app, I get the rich editor to show up okay, but for some reason I cannot type into the rich editor field and when I click a button like for bolding, I get this error:

Error: [Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMNSHTMLDocument.execCommand]"  nsresult: "0x80004005 (NS_ERROR_FAILURE)"  location: "JS frame :: http://mysite/tiny_mce/tiny_mce.js :: anonymous :: line 1"  data: no]
Source File: http://mysite/tiny_mce/tiny_mce.js
Line: 1

I'd like to know what I can do to debug what's going on here. What could be causing this strange error?

Some background:

This code loads the TinyMCE:

<script type="text/javascript" src="http://mysite/tiny_mce/tiny_mce.js"></script> 
    mode : 'none',
    editor_selector: 'mceAdvanced',
    theme : 'advanced',
    theme_advanced_toolbar_location : 'top',
    theme_advanced_toolbar_align : 'left',
    theme_advanced_buttons1 : 'fontsizeselect,bold,italic,|,bullist,numlist,|,outdent,indent,|,removeformat',
    theme_advanced_buttons2: '',
    theme_advanced_buttons3: '',
    theme_advanced_font_sizes: "1, 2, 3, 4",
    width: '600',
    height: '200',
    remove_script_host : true,
    cleanup_on_startup : true,
    cleanup: true,
    debug : true,
    convert_urls : false

tinyMCE.execCommand('mceAddControl', true, 'fldOverview');

<textarea id="fldOverview" name="fldOverview" class="textbox"><?= OVERVIEW ?></textarea>

Tested on:

FF3 fails. Opera (latest stable) works. Windows IE7 works. Safari (latest stable) works.

Best Solution

The answer is here.

The deal is this. Ever use Facebook? We were trying to implement a similar interface where you click to edit a profile section, it collapses and re-expands with a progress bar, then collapses and re-expands with a profile form. In that profile form, we had the TinyMCE rich editor.

Well, it turns out that there's a quirk with DIVs being hidden and then shown to display the TinyMCE control. It gets the timing off or something? Anyway, we were using the slideToggle API in jQuery to collapse and re-expand a DIV with new contents that we pulled back via jQuery AJAX stuff. And when we did, somehow this slideToggle API hosed us up.

The fix was to do the slideToggle like we normally do, but before we load the tinyMCE editor with the execCommand technique, we need to use the show API in jQuery to ensure our DIV is forced open and visible, first. When we did that, the problem went away.

Related Question