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

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 2

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