problem with tinymce editor when navigating through tabs

I am using tinymce in my application to show the tinymce Editor in place of the textarea. In the JSP I have two tabs and both contains the tinymce text editor. In tab 1 I have below snippet

<form:textarea path="msgToIS" class="mceEditor" rows="4" cols="175"/>
...
...
<script type="text/javascript" >
tinyMCE.init({
            mode : "textareas", 
            theme : "advanced",
            plugins : "pagebreak,style,layer,table,save,advhr,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
            editor_selector :"mceEditor",
            skin : "o2k7",
            skin_variant : "silver"
         });
</script>

On tab 2 I have another textarea as below

<form:textarea path="comment" class="mceEditor" rows="4" cols="175"/>
...
...
<script type="text/javascript" >
    tinyMCE.init({
                mode : "textareas",
                theme : "advanced",
                plugins : "pagebreak,style,layer,table,save,advhr,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
                editor_selector :"mceEditor",
                skin : "o2k7",
                skin_variant : "silver"
             });
    </script>

Issue - When I follow below steps I am getting error "Error: j is null Source File: http://localhost/portal/javascript/tinymce/jscripts/tiny_mce/tiny_mce.js Line: 1" in the error console. I can see this error only in Firefox.

step 1 - Click on tab 1

Step 2 - Click on tab 2

Step 3 - Click on tab 1

Step 4 - Enter some comment in the editor.

Step 5 - submit the page. On submit when I try to access editor value using "tinyMCE.get('msgToIS').getContent()" I am getting above error.

However When I just click on the tab 1 without visiting tab 2 and submit the page I wont get any error, infact I get correct editor content.

The same script is working fine in IE6, Safari but not in Firefox 3.6.

Any help is appreciated. Thanks in advance!!

If you're doing anything dynamic (like switching between "tabs" via javascript) with TinyMCE you have to add and remove the editors manually or you will get strange results. I cover this in more detail in my blog post (which I'm assuming you didn't actually read before commenting on it and asking for me to help you with this) but the gist of it is this:

1. Use mode "none" so that TinyMCE doesn't automatically init and take over text areas. Using mode "textareas" will cause issues for any hidden text areas since they won't be properly initialized. (For example, the one on tab 2 is initially hidden.)

2. Anytime a tab is shown (like say at page load or when switching tabs), manually initialize the TinyMCE editor on the text area like so:

   tinyMCE.execCommand('mceAddControl', false, 'the_textareas_id_here');

3. Before switching to a new tab, trigger a save on the current text area (this will put the contents of the TinyMCE editor back into the actual form's text area.

   tinyMCE.triggerSave();

4. Remove the current TinyMCE instance:

   tinyMCE.execCommand('mceFocus', false, 'the_textareas_id_here');
   tinyMCE.execCommand('mceRemoveControl', false, 'the_textareas_id_here');

5. Switch to the new tab and repeat from step 1.

Maybe it has to do with the fact that both textarea have class="mceEditor" and you are using TinyMCE.init with editor_selector :"mceEditor" in each case. Maybe give each textarea a different class "mceEditor1" and "mceEditor2", and set the params for each init call accordingly: editor_selector :"mceEditor1" and editor_selector :"mceEditor2" ...

It's a tinymce bug. Internally, the tinymce code uses a <span id="mce_marker"></span> to remember the caret-position when pasting. when validating the resulting fragment, after the paste, the span is deemed invalid and removed, thus breaking the code by removing the marker. This issue will be fixed in the next official tinymce minor release. There are some workarounds for this kind of issue. One is to add to add id and mce-data-type attribute to spans as valid elements (init setting). Example:

// The valid_elements option defines which elements will remain in the edited text when the editor saves.
    valid_elements: "@[id|class|title|style]," +
    "a[name|href|target|title]," +
    "#p,-ol,-ul,-li,br,img[src],-sub,-sup,-b,-i,-u" +
    "-span[data-mce-type]",

There is no method that I haven't tried on the forums for days, but in my case, none of them worked.

So I chose to do a work around...

<script type="text/javascript">
    (function() {
        if (window.localStorage) {
            if (!localStorage.getItem('firstLoad')) {
                localStorage['firstLoad'] = true;
                window.location.reload();
            } else
                localStorage.removeItem('firstLoad');
        }
    })();

    tinymce.init({
    ...
</script>