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?

Thermonuclear

I want same to be done here in my script – Underhand

Answer 1

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

Denyse

deduce the extra size of the editor instance - Are you talking about after it's initialized the iframe is set at like 1000+px? Because that's what I'm seeing. – Moulton

This is the best answer so far. You can put this in the init to get at the editorinstance directly, access using the tinymce.activeEditor field, or using tinymce.get(ID) – Reception

to expand this. If you need change only height, pass in 1st argument (width) null. That changes only height. – Elisaelisabet

This doesn't work after TinyMCE v4. The solution I was able to use is setting the height on the container in the active editor: editorinstance.container.style.height = '1000px' – Steamroller

EDIT: Nevermind, the above only works when you have the autoresize plugin enabled. Instead, you can use tinymce.activeEditor.editorContainer.style.height = '1000px' – Steamroller

This worked in a WordPress context to reduce the height of ACF inputs. TinyMCE seems to have a minimum height of 200. Values should be bare integers, which are translated to pixels. Adjusting the editor's container.style directly broke the interface for me. – Cyme

Answer 2

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

Viviyan

After searching through a couple posts about this topic this is by far the most elegant solution, and the only one that has worked for me! – Goebbels

Marc Lehmann's answer is the correct way to do it, you should change your accepted answer. – Bainbrudge

Agreed, Marc Lehmann's answer is the most elegant using no query selectors or dependencies, and simply uses the built-in resizeTo method. – Reception

Answer 3

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

Immature

Works like a charm. Thank you. – Fox

Answer 4

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.

Mag

I tried the plugin Autoresize described at tinymce.com/docs/plugins/autoresize but I couldn't find any way to dynamically set the height for tinyMCE in relation to browser size by the options of this plugin. I assume the most proper solution comes from Kyle Falconer. – Cytokinesis

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)"
});

Lanthorn

Answer 6

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

Holofernes

Hey it did changed the height of iframe but its not reflected in UI. The code captured by firebug is <tr class="mceLast"><td class="mceIframeContainer mceFirst mceLast"><iframe id="compose_ifr" src='javascript:""' frameborder="0" title="Rich Text Area. Press ALT F10 for toolbar. Press ALT 0 for help." style="width: 100%; height: 200px; "></iframe></td></tr> Height of iframe has changed to 200px, but height of tr containing the iframe is not changed at all and it is not reflected in the UI. :/ – Thermonuclear

Isnt these anything in tinyMCE itself for this purpose?? autoresize plugin works well with width but not with height! – Thermonuclear

Answer 7

You can set it according to your height

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

Gaston

Answer 8

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

Bladdernut

Answer 9

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; 

Interrelated

Answer 10

 $(window).load(function () {

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

});

Troxler

Add information about the code you posted. Have you tried it with the tineMce, or is it just a 'try this code'? – Honeydew

Answer 11

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.

Milks