Change TinyMce Editor's Height Dynamically

Answer :

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

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

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