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 setComposeTextareaHeight()
{
    $("#compose").height(200);
}

but that is not working. My textarea is

<textarea id="compose" cols="80" name="composeMailContent" style="width: 100%; height: 100%">

I have tried all sorts of methods for changing the height but could not come to a resolution. Is there any thing that i am missing?

Answer 1

By default TinyMCE reads element.style.height and uses that:

<textarea class="editor" style="height: 500px"></textarea>

However, this only works if the element is visible during tinymce setup; if it is hidden (e.g. inside a collapsed element/inactive tab), then the inline height is ignored and a default height of 200px is set.

To overcome this, the following addition to the init parameters is necessary:

$('.editor').tinymce({
    setup: (editor) => {
        editor.on('init', () => {
            // Both editorContainer and targetElm are only available here.
            editor.editorContainer.style.height = editor.targetElm.style.height;
        });
    }
});

This works for everything, and allows to customise each individual editor on the page.

You can also do this at any other point in time after initialization, you just need to retrieve the editor; if there is only one textarea in the page, then tinymce.activeEditor will work, but if there are multiple, then tinymce.get('id_of_specific_textarea') should do the trick.

P.S. The version I wrote this code for is 5.1.2, released in 2019; the current version is 7.3.0, and nothing has changed, so it should be safe to say that this code should work for a while yet.

Answer 2

the following code should work for version 6

const wishedHeight = '100px'
// get `editor` from context of callbacks like `init`, `setup`, `loaded`, etc 
editor.editorContainer.style.height = wishedHeight; 

Answer 3

I test this solution on version 5 of TinyMCE.
For change the height of TinyMCE after page loaded, all you need is: your element id

$(function(){
    var selectedElement = tinymce.get('Element id without sharp(#)');
    selectedElement.settings.height = 700;
    selectedElement.settings.max_height = 400;
    selectedElement.settings.min_height = 1000;
});

Also you can use autoresize plugin for get better experience:

tinymce.init({
    plugins: 'wordcount autoresize',
})

Answer 4

You can set it according to your height

tinymce.init({
     height: "500px"
});

Answer 5

I'm using tinymce 4.8.3.

I display the editor in a resizable modal dialog box.

I solved this using flexbox, shown here in SASS/SCSS:

// TinyMCE editor is inside a container something like this
.html-container {
    height: 100%;
    overflow: hidden;
}

.mce-tinymce {
    // This prevents the bottom border being clipped
    // May work with just 100%, I may have interference with other styles
    height: calc(100% - 2px);

    & > .mce-container-body {
        height: 100%;
        display: flex;
        flex-direction: column;

        & > .mce-edit-area {
            flex: 1;

            // This somehow prevents minimum height of iframe in Chrome
            // If we resize too small the iframe stops shrinking.
            height: 1px; 
        }
    }
}

When the editor is initialized we have to tell it to put 100% height on the IFRAME. In my case I also have to subtract 2px else the right border is clipped off:

tinymce.init({
    ...
    height: "100%",
    width: "calc(100% - 2px)"
});

Answer 6

 $(window).load(function () {

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

});

Answer 7

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 8

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 9

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 10

You can resize tinymce with the resizeTo theme method:

   editorinstance.theme.resizeTo (width, height);

The width and height set the new size of the editing area - I have not found a way to deduce the extra size of the editor instance, so you might want to do something like this:

   editorinstance.theme.resizeTo (new_width - 2, new_height - 32);

Answer 11

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');

Answer 12

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(';'));
        }
    },