How to automatic resize tinyMCE?

javascript html resize tinymce autoresize
igorsantos07 picture igorsantos07 · Nov 25, 2009 · Viewed 55.9k times · Source

I have a TinyMCE that is set over a TextArea, and I want this editor area to ocuppy all the space of its parent div, all times.

I have a JS function that get the current space and set the textarea.style.height to it, but when I enables TinyMCE it seems to stop working.

Also, the textarea has width: 100%; it doesn't resize by HTML rendering when it's using TinyMCE too.

Any ideas?

Answer

bfncs picture bfncs · Sep 12, 2012

Nowadays, you should use the autoresize plugin that comes with tinyMCE. You will have to call tinyMCE like this (jQuery version):

$('.tinymce').tinymce({
  theme : 'advanced',
  plugins : 'autoresize',
  width: '100%',
  height: 400,
  autoresize_min_height: 400,
  autoresize_max_height: 800,
});

I made the experience, that it may be helpful to manually call the resizing in the init_instance_callback to provide the correct height on init. Add this parameter to the passed options, if you need this:

init_instance_callback: function (inst) { inst.execCommand('mceAutoResize'); }

Related questions

Creating a textarea with auto-resize

There was another thread about this, which I've tried. But there is one problem: the textarea doesn't shrink if you delete the content. I can't find any way to shrink it to the correct size - the clientHeight value comes …

Read More
How to wait for the 'end' of 'resize' event and only then perform an action?

So I currently use something like: $(window).resize(function(){resizedw();}); But this gets called many times while resizing process goes on. Is it possible to catch an event when it ends?

Read More
Scale image before toDataURL - html2canvas

Before you tell me this is a duplicate question, know that I've searched through every single similar question and none of the answers in any of them are working for me. Im using html2canvas to grab a snapshot of …

Read More