Change tinyMce editor's height dynamically

Question

I am using tinymce editor in my page. What I want to do is to change the height of the editor dynamically. I have created a function:

function setComposeTex         


        

Answer 1

The following comes in from this other SO answer I posted:

None of the above were working for me in TinyMCE v4, so my solution was to calculate the height based on the toolbars/menu bar/status bar, and then set the height of the editor, taking those heights into consideration.

function resizeEditor(myHeight) {
    window.console.log('resizeEditor');
    myEditor = getEditor();
    if (myEditor) {
        try {
            if (!myHeight) {            
                var targetHeight = window.innerHeight; // Change this to the height of your wrapper element
                var mce_bars_height = 0;
                $('.mce-toolbar, .mce-statusbar, .mce-menubar').each(function(){
                    mce_bars_height += $(this).height();
                });
                window.console.log('mce bars height total: '+mce_bars_height);                          
                myHeight = targetHeight - mce_bars_height - 8;  // the extra 8 is for margin added between the toolbars
            }
            window.console.log('resizeEditor: ', myHeight);
            myEditor.theme.resizeTo('100%', myHeight);  // sets the dimensions of the editable area
        }
        catch (err) {
        }
    }
}

In my case, I wanted the editor window to match the width and height of the actual window, since the editor would come up in a popup. To detect changes and resize, I set this to a callback:

window.onresize = function() {
    resizeEditor();
}

Answer 2

What ManseUK stated is almost correct. The correct solution is:

$('#compose_ifr').height(200);

or in your case

$('#composeMailContent_ifr').height(200);

Update: maybe this is more what you are looking for:

    // resizes editoriframe
    resizeIframe: function(frameid) {
        var frameid = frameid ? frameid : this.editor.id+'_ifr';
        var currentfr=document.getElementById(frameid);

        if (currentfr && !window.opera){
            currentfr.style.display="block";
            if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) { //ns6 syntax
                currentfr.height = 200 + 26;
            }
            else if (currentfr.Document && currentfr.Document.body.scrollHeight) { //ie5+ syntax
                    currentfr.height = 200;
            }
            styles = currentfr.getAttribute('style').split(';');
            for (var i=0; i<styles.length; i++) {
                if ( styles[i].search('height:') ==1 ){
                    styles.splice(i,1);
                    break;
                }
            };
            currentfr.setAttribute('style', styles.join(';'));
        }
    },

Answer 3

It's a bit late but for Googler like me, check the autoresize plugin

tinymce.init({
    plugins: "autoresize"
});

Options

autoresize_min_height : Min height value of the editor when it auto resizes.

autoresize_max_height : Max height value of the editor when it auto resizes.

Answer 4

 $(window).load(function () {

$('#YourID_ifr').css('height', '550px');

});

Answer 5

In case someone finds this and also wants to change the height of the source code editor plugin.

You need to edit the following file:

\tiny_mce\plugins\code\plugin.min.js

Look out for the attribute called minHeigh and adjust it to your needs. The height you define there is not the height of the entire box, but it is not the height of the textarea either. It is something inbetween.

Answer 6

Try:

tinyMCE.init({
       mode : "exact",
       elements : "elm1",
     ....

To change size dynamically in your javascript code:

var resizeHeight = 350;
var resizeWidth = 450;
    tinyMCE.DOM.setStyle(tinyMCE.DOM.get("elm1" + '_ifr'), 'height', resizeHeight + 'px');
    tinyMCE.DOM.setStyle(tinyMCE.DOM.get("elm1" + '_ifr'), 'width', resizeWidth + 'px');