Django TinyMCE spellchecker not working properly in Chrome, Safari

Question

I'm using TinyMCE editor for my forms in my django app. But the spellchecker plugin won't work properly in Chrome (version 21.0.1180.79) and Safari (version 5.1.7), but works great in Firefox. "Not working properly" here means that the spellchecker doesn't act like it should compared to the full featured example of tinymce http://fiddle.tinymce.com/baaaab. I'm using django-tinymce v1.5.1b2 and the version of tinymce in my /static/js/tiny_mce is 3.5.6 (based on tiny_mce_src.js)

When using Chrome/Safari, the misspelled words that were typed BEFORE clicking the "toggle spell check" button are not underlined in red (I have to click those words for them to be underlined in red). Upon disabling the spell check feature (clicking the button again), the red underline in the misspelled words are not automatically removed(again, I have to click the words so that the red underlines will go off).

The spell check feature works great in Firefox, just like in the full featured example. I think this is a javascript issue, but I haven't seen errors when debugging through browsers. Any help would be greatly appreciated!

Edit: this is my tinymce init code:

tinyMCE.init({
mode : "textareas",
theme : "advanced",
width: "565", 
height: "150",
plugins : 'table,spellchecker,paste,searchreplace,autoresize',

theme_advanced_buttons1 : "bold,italic,underline,|,justifyleft,justifycenter,justifyright,|,outdent,indent,|,bullist,numlist,blockquote,|,formatselect,|,undo,redo,|,spellchecker,|,pastetext,pasteword,removeformat",
theme_advanced_buttons2: "",
theme_advanced_buttons3 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align: "center",
theme_advanced_statusbar_location: "bottom",
theme_advanced_resizing: "true",
theme_advanced_resizing_min_width: "565",
theme_advanced_resizing_min_height: "150",
theme_advanced_resizing_max_width: "565",
theme_advanced_blockformats: "p,h2,h3,h4,h5,h6,blockquote",
});

Answer 1

I had a similar problem with mezzanine, that is a Django CMS that uses django-grappelli (implementing tinyMCE). I guess this solution can be applied to your case as well.

I've solved putting these two lines inside the init method of the tinyMCE_setup.js file:

 tinyMCE.init({
    // ...
    gecko_spellcheck : true,
    browser_spellcheck : true,
    // ...
});

This use the in-browser spellcheck (deactivate by default). The first line activates it for Chrome and Firefox, the second made it work also for Safari.