Search code examples
javascripthtmlresizetinymceautoresize

How to automatic resize tinyMCE?

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?

Solution

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