Resize Height tinyMCE editor

Question

I have bootstrap tabs setup with one tab having the tinyMCE editor and another tab carrying a raw/minified version of the data that goes into the tinyMCE editor

When I initially load the page, the height of the editor is set to 100px. When running the data collection, it uses tinymce.get('dataReport').execCommand('mceInsertContent', false, content);

and the height of the editor will change as it adds content.

My issue, when the other tab (raw data tab) is active, when the user switches back to the tinyMCE tab, the height of the editor is still at 100px. But once the user clicks inside the editor, it will resize.

Is there a way to manually call a resize on tinyMCE when the tab is selected?

I tried fooling it with a onclick="tinymce.execCommand('mceFocus',false,'dataReport');" on the tab button, and it will focus fine (ie. I can start typing right away) but the height of it is still at 100px.

Answer 1

you can use resizeTo(w,h) method documentation

In your onClick call a function updateTinymce()

function updateTinymce(){
   tinymce.execCommand('mceFocus',true,'dataReport');
   var ed = tinymce.activeEditor;
   ed.theme.resizeTo(400, 200);
}