Clever Geek Handbook

TinyMCE and Firefox 11

As most of you know, the Firefox 11 update was released a few days ago. After the release, I received a notification that there was some strange behavior in our web application. We have multiple instances of TinyMCE on the same page and only the first instance works as it should. The other instances do not appear to be editable with the naked eye, but in fact the changes made to the "other" instances will be preserved on submission.

After a pleasant google session, I noticed other people had the same problem, but most of the time the solution was to upgrade Tiny to 3.5b2 (I'm currently using 3.37) or remove / add some plugins. Didn't work for me.

I also noticed that when manually resizing Tiny, the text gets rendered and the resized instance works fine.

Anyone?

UPDATE: I created a new webpage with multiple instances (version 3.5b2) and everything worked fine on FF11. The problem seems to be elsewhere in our web app. I'll post this as an answer in a few hours.

+3


source to share


4 answers


I made a new webpage with multiple instances (version 3.5b2) and everything worked fine on FF11. The problem seems to be somewhere else in our web application.



0


source


Add this script just before the closing tag



jQuery(window).load( function() {
    jQuery(".mceEditor .mceLayout").each(function(i,ele){
        jQuery("#"+ele.id).css('width',jQuery("#"+ele.id).width()+10)
    });
});
+4


source


without jquery

try {
    function addEvent(obj, evType, fn){ 
        if (obj.addEventListener){ 
            obj.addEventListener(evType, fn, false); 
            return true; 
        } else if (obj.attachEvent){ 
            var r = obj.attachEvent("on"+evType, fn); 
            return r; 
        } else { 
            return false; 
        } 
    }
    addEvent(window, 'load', function() {
        var divs = document.getElementsByClassName('mceEditor');
        for (d in divs) {
            var iframes = divs[d].getElementsByTagName('iframe');
            for (i in iframes) {
                iframes[i].style.width = iframes[i].style.width = '500px';
            }
        }
    }
    );
} catch(err) {}
+1


source


This is my solution for my 3.3.9.3 (thanks to Thomas for your input):

$(window).load(function(){
 $('.mceEditor').hover(function(){
        el  = $('.mceFirst iframe');
        el_w  = el.width();
        el.css("width",el_w+1);
        el.css("width",el_w-1);
    });
});
0


source






More articles:


All Articles