Question

I’m using Tinymce (with jQuery) in a project I’m working at; we use a rich text editor for users to input information; however, sometimes when loading the page Firefox and Chrome will detect a ‘tinymce is not defined’ error (sometimes at different lines of the code), while other times the page will load just fine. What’s weird is that it works perfectly with IE.

Here’s a bit of the code I’m using:

view.find('textarea.rich-text').each(function () {        
   $(this).tinymce( /* ...rules... */);        
});  

And later on

_variable.find("#summary").tinymce().setContent(content);

This line is where the error (sometimes) gets caught. It seems to me that the problem is a loading issue, even though the tinyMCE plugin is initialized about 5000 lines prior this line.

Update: For now I have managed to ‘solve’ the problem with a setTimeout, but this seems like a really ugly way to do it.

Answer 1

A few points:

• You don’t mention whether or not the TinyMCE initialization is done within a jQuery ready event function. It should be of course.

• You don’t need the each loop. You can just say:

$('textarea.rich-text').tinymce({
script_url : '../js/tinymce/jscripts/tiny_mce/tiny_mce.js',
theme : "advanced",
...
});

• You don’t need the call to find since you are just selecting by id. Just do:

$("#summary").tinymce().setContent(content);

• Your real issue is probably that tinymce has not finished initializing itself when you get the error. You see it has to load a script from the configured script_url. That may take a while. Therefore, you have to make use of a callback such as oninit.