Cross browser issue with TinyMCE iframe resize

Question

After I found a solution to resize my tinyMCE instances ( they are readonly ). I faced a problem that I can't solve from hours... When I init the tinyMCE everything is OK, but in Internet Explorer and early versions of Chrome this doesn't work

tinyMCE.init({
        mode: "textareas",
        theme: "advanced",
        readonly: true,
        theme_advanced_path: false,
        theme_advanced_resize_horizontal: false,
        autoresize: true,
        width: "870",
        setup: function(ed) {
            ed.onLoadContent.add(function(ed, o) {
                var iFrameID = "#" + ($(this).attr('id')) + "_ifr";
                $(iFrameID).height($(iFrameID).contents().find("html").height());
                //iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
            });
        }
    });

Also my Java Script attempt which is bellow the jQuery also not works. I will be more than happy if anyone got solution for this! Thanks in advance!

Have you checked the console for errors? What do you mean with "not works"? Why the title reports Cross domain issue? — Irvin Dominin, May 04 '13 at 13:21
Sry... I mean Cross Browser ( now it's edited ) Not works means that in IE and early versions of Chrome the iFrame stays not resized. And I cant find solution that works in each browser... — cyrat, May 04 '13 at 13:30
what i see in docs is a property name theme_advanced_resizing set it to true.. it's rquired to make resizable tinymce — Vishal Sharma, May 05 '13 at 11:12
@vishalsharma: yes, but this enables the user to resize the window. here the editor shall get resized oninit without any user action — Thariama, May 06 '13 at 08:53
http://stackoverflow.com/questions/1799123/how-to-automatic-resize-tinymce — Vishal Sharma, May 06 '13 at 10:37
@Thariama You're helping me for 10010101 time! THANK YOU MATE! THANK YOU! — cyrat, May 06 '13 at 13:56
Today I'll post the configuration that I've made, but sorry I can't make fiddle because the project where I'm doing this not allows it. — cyrat, May 07 '13 at 10:48

score 0 · Accepted Answer · answered May 07 '13 at 10:53

And here is the configuration that worked for me!

 tinyMCE.init({
            mode: "textareas",
            theme: "advanced",
            theme_advanced_path: false,
            theme_advanced_resize_horizontal: false,
            autoresize: true,
            readonly: true,
            width: "870",
            plugins: 'autoresize',
            autoresize_min_height: "200",
            autoresize_max_height: "50000",
            init_instance_callback: function(inst) {
                inst.execCommand('mceAutoResize');
            },
            setup: function(ed) {
                ed.onLoadContent.add(function(ed, o) {
                    var iFrameID = "#" + ($(this).attr('id')) + "_ifr";
                    $(iFrameID).contents().find("html").children().append("<base target=_blank>");

                   //The following row not works in IE - $(iFrameID).height($(iFrameID).contents().find("html").height());
                });
            }
        });

Cross browser issue with TinyMCE iframe resize

1 Answers1