Love the web

Love the web is a design, programming, and usability blog

TinyMCE plugin: auto resize 53 comments

Peter Dekkers 07 May 2009

NOTE: Springload no longer maintains this plugin. It's part of the standard TinyMCE distribution and is maintained by the TinyMCE team. Please download it from the official site.

We frequently use the TinyMCE WYSIWYG here at Springload, and were faced with the problem of it not resizing when content gets added. This resulted in a limited overview of the content and a lot of scrolling.

A mime is squished into a WYSIWYG box that's way too small
Without the plugin, the content is sad and cramped.

TinyMCE comes with an experimental method called "auto_resize", which provides a way to remedy that: it makes the WYSIWYG editor expand as more content gets added. But it was experimental for a reason. It provided a good basis though, and so using it as inspiration we set out and created a plugin for TinyMCE. It should hopefully fix the problems of the bundled experimental method. And it's always good to give back to the Open Source community.

Mime holding an umbrella, standing up inside a WYSIWYG box
With the plugin... ah who am I kidding! Mimes are born sad.

We've tested in the following browsers: IE6, IE7, IE8, Safari 3, Firefox2, Firefox3, Opera 9 and Chrome 1.

NOTE: Springload no longer maintains this plugin. It's part of the standard TinyMCE distribution and is maintained by the TinyMCE team. Please download it from the official site.

Read the next post - Detecting Bandwidth with Flash and loading the right content

Subscribe to these comments

53 comments submit a comment

08 May 2009

Peter Dekkers

It seems we have uncovered a small bug! Every now and then the editor will become really long on load, way too long. Once you click into it and type, it will resize correctly, but the initial size on page load is off sometimes.

Will post back when there's a fix!

24 May 2009

John

Thank you very much in giving us this useful plugin! For the moment I didn't meet the described bug. Do you know when it will be fix ?
John

25 May 2009

Peter Dekkers

Hi John,

We're working on a fix still, I hope to have it out by the end of the week.

The bug occurs when loading TinyMCE over a slower connection, as when the editor's CSS loads, the content area resizes. We're looking at adding a listener to the CSS onload event.

Peter

25 May 2009

Peter Dekkers

Hi John,

We've fixed the bug: autoresize v1.1 (4KB)

Mind that it can still occur that the content editor resizes incorrectly when it first loads, but these cases should be limited to those where the connection that the TinyMCE loads over is very slow - dial-up - and there are many editors on the page. The editor will resize correctly once someone starts typing, however.

I can't think of an easy way to remedy this without having onload events firing for the content CSS and any images in the content.

Should work fine in 99.9% of cases :)

Enjoy!
Peter

25 May 2009

John

Great ! Thank you for the fast release ! John

25 May 2009

Peter Dekkers

Two releases in one day. We identified a few smaller problems and have remedied them in version 1.2:

autoresize v1.2 (4KB)

From the change log:

"Changed hiding all scrollbars to just hiding the vertical one, so you can still have a horizontal scrollbar for wide content. Also added an onload handler to the iframe, so that the area resizes after all of the iframe's content has loaded."

Cheers!
Peter

25 May 2009

John

...1.2 makes a problem: there are many blank lines below the text, what didn't occur with 1.1

25 May 2009

Peter Dekkers

Ah, thanks John. Does that occur every time the page/plugin loads or only sometimes?

25 May 2009

John

everytime but under Chrome/google. I will test more but I have to leave now

25 May 2009

John

I tried any tests at office. With 1.1 no prob. With 1.2, ok under IEx7, FF3. But under Google Chrome there are everytime many blank lines (really too much) at the end of the text. It doesn't occur with 1.1. Hope it can help.

26 May 2009

John

Peter, if I delete the semi-colon (;) in line 107 letting

// Resize
this.execCommand('mceAutoResize')
// Disable throbber

it functions. Don't ask me why, I don't know. I just compared the 1.1 and 1.2. Can you confirm ?
Best regards.

28 May 2009

Prekshu Ajmera

Hey.. This is really cool. It solved most of my problems with the auto resize feature in TinyMCE. Earlier I was using the mehod given on TinyMCE wiki.

I also use TinyMCE in read-only mode. So, on slower connections many a times I face a problem that complete content in the editor is not visible. For eg. the images at the end of the content got overridden by the readonly editor area. I hope this problem will not come again with this plugin.

Thanks a lot.

28 May 2009

Prekshu Ajmera

Hey.. I am having problems with IE6.

The following fix that you have provided in version 1.2 doesn't seem to work for me in IE6 :(

"Also added an onload handler to the iframe, so that the area resizes after all of the iframe's content has loaded."

Images in the readonly editor are not fully visible many a times.

Please help.. Best regards.

29 May 2009

homer

This is great. One thing I noticed is that if I make my text area only 1 row high I get some extra "grey space" below the toolbar.

See the following (I have outlines the area with a red box - as seen in FF2): http://screencast.com/t/FgMeTdjW

Is there any way to get rid of the area? The grey area is 2 lines high if I set the toolbar location to external.

Regards.

29 May 2009

Peter Dekkers

Thanks everybody for the valuable feedback. We'll try and look into these issues. This plugin will also be part of the official TinyMCE distribution as of its next release.

We'll keep you updated.

Cheers,
Peter

04 Jun 2009

Jon Glick

Hey,

This plugin is great and works really well. I have a situation where tinyMCE initializes in a hidden div and I'm having trouble getting it to resize correctly once shown. I've been using: tinyMCE.get().execCommand('mceAutoResize'); to trigger the resize once the div is shown, but sometimes the height of the tinyMCE iframe remains 0px or picks an arbitrary large height ( > 800px ). I assume this has something to do with autoresize_min_height being set when the editor has display: none;. Is there a way to statically set the autoresize_min_height? Calling mceAutoResize twice, a few ms apart, helps but feels incredibly hacky.

Do you know of a better / more reliable approach to resizing tinymce after it was initialized hidden?

Thanks for the sweet plugin!

16 Jun 2009

Andy

Little known fact: The mime in the article pictures are actually Peter.

24 Jun 2009

Jon Glick

I haven't had a chance to look into it yet, but does anyone know why Safari 4 makes the TinyMCE height really tall?

24 Jun 2009

Peter Dekkers

Hi Jon,

Haven't had a chance to properly debug this either, but I do know that the main TinyMCE development team have a few changes for the plugin. There's a marginal chance that they will solve the problem.

Will report when I've had a chance to have a proper look.

Cheers,
Peter

07 Jul 2009

Dale Larsen

I found another small bug in Firefox. It does not resize to compensate for elements that are positioned absolute. I have a plugin which adds images but the images are positioned absolute so you can drag them around. When adding an image that is positioned absolute the content area does not resize for it.

Great plugin! It works amazingly other than that!

DL

09 Jul 2009

CT

I'm not sure if this is the right place to post this, but there seems to be a problem with Safari 4 and the autoresize plugin. I am using the bundled version of the plugin. The problem is that the editor grows according to the content, but doesn't shrink when content is deleted. Any ideas?

13 Jul 2009

John

Hello Peter,
The Google Chrome bug that I described above has not been corrected in the plugin bundled with tinymce 3.2.. Please consider what I wrote about this bug:

[quoted]
if I delete the semi-colon (;) in line 107 letting

// Resize
this.execCommand('mceAutoResize')
// Disable throbber
[unquoted]

Thank you for the great routine!
John

02 Aug 2009

Juan

Hi,

I can't get it working, can someone help?

Here is my code:

tinyMCE.init({



theme : "advanced",
mode : "textareas",
editor_selector : "TextArea1",
//height:"200",
//width:"100%",
plugins : "autoresize",

//theme_advanced_layout_manager : "SimpleLayout",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,

theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",

readonly : false,
auto_resize : true //not working


I replaced the files under tiny_mce\plugins\autoresize for those in the autoresize1.2 zip.

But once i type some text in the text area, i get a horizontal scroll bar.. can someone help me please?

(Tested on IE 8 and Firefox 3.5)

Thanks.

03 Aug 2009

Peter Dekkers

Hi Juan,

You're using two resize methods on top of each other there. The only line you need is:

plugins : "autoresize",

And you need to delete these two:

theme_advanced_resizing : true,
auto_resize : true //not working

Then it should work! For example, here's my setup:

tinyMCE.init({
mode : "textareas",
auto_focus : false,
editor_selector : "FieldTinyMCE_it_content",
theme : "advanced",
skin : "default",
plugins : "paste,safari,inlinepopups,autoresize",
paste_auto_cleanup_on_paste : true,
paste_create_paragraphs : true,
paste_create_linebreaks : true,
paste_convert_middot_lists : true,
paste_remove_spans : true,
paste_remove_styles : true,
paste_strip_class_attributes : "all",
force_br_newlines : false,
force_p_newlines : true,
forced_root_block : "p",
convert_urls : false,
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_buttons1 : "formatselect,styleselect,bold,italic,bullist,numlist,link,unlink,anchor,image,pasteword,code,help",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_blockformats : "p,h2,h3,
});

Hope that works for you.

Cheers,
Peter

18 Aug 2009

Dominique

Hi everyone and thank you for sharing your work with us,

For me this plugin in Firefox has a few bugs and I don't know how to
deal with that, so if someone can help me ?

The editor is growing as soon as I press any key and it never shrink !

I am using tinyMCE 3.1.0.1 and here is a part of my setup:

tinyMCE.init({

mode : "exact",
elements : 'idContent',
theme : "advanced",
plugins : "safari, autoresize, ...

(....)

});

Thanks.

18 Aug 2009

Dominique

Works well after updating tinyMCE sorry about that,

thanks again.

20 Aug 2009

Dave F

Hello all.. I really like the autoresize but how do I make it not show gray borders on top and bottom if there is less than 3 lines of text? I really need to be able to have it clear white with only 1 line of text.

http://screencast.com/t/SuRAReGherU

great addition, thanks again :)

D.

15 Sep 2009

Florian

Hi all,
I have the same problem/wish as Dave F.:
My textareas have to show only 1 textline und no grey paddings if they are empty.
Is there any possibility to do configure this with autoresize??
Thanks in advance und greetings from Germany!
Florian

18 Sep 2009

Adil

Hi,
I have the same problem of Dave and Florian.

I have an other question, is there same plan to support this plugin in Safari 4?

Many thanx..
Adil

23 Sep 2009

Adil

Hoi homer,

you can fix the gray spaces issue adding this lines
var tble = DOM.get(ed.id + '_tbl');
tble.style.height = 'auto';

in ed.addCommand('mceAutoResize',..) function

Regards,
Adil

08 Oct 2009

AllFreshTymen

Hey,

First of all, a very nice and usefull plugin.

I do have a problem though. With my setup of TinyMCE I load the
contents with Ajax, so TinyMCE will not be reloaded or anything.

When I type a lot of content, and the resize plugin does its job
correctly. But when I then load diffrent content into TinyMCE I get
problems with the resizing.

Firefox has no problems with it, but for example when IE (8) has
a lot of content and the editor is stretched. And then I load a page
wich has less content, the page will remain to be stretched to the
length of the page wich had a lot more content.

Then sometimes it is the other way around. Just a little bit of
content. Then I load a page with a lot of content, and it will stay
the same size as it was with the little bit of content.

And then there is a problem with the latest Safari. It is basically
the same as the one I had in IE8. Only in Safari TinyMCE will stay
stretched at the longest point. It is never the way around, as it is
in IE8.

Anyone who had the same problem?

Or is there a solution?

Please, I coud use the help,

21 Oct 2009

Thomas Lundström

Hi,

Thanks for a useful plugin! I've got one strange problem, though.

I use jQuery's AjaxForm to submit the data in the editor, with tinyMCE.triggerSave to sync the editor's contents down to the actual textarea before submitting. If the user expands the editor area using Safari, the ajax submission doesn't work as expected, but instead Safari does a full POST to that url.

This only happens with Safari. Chrome works perfectly with the ajax request. Have any of you seen this before?

Since I'd like to use the behavior for the other browsers asap, I'm wondering if it's possible to disable the plugin for Safari only?

21 Oct 2009

Thomas Lundström

Hi,

Never mind, this wasn't due to the autoresize plugin.

Cheers,
Thomas

27 Oct 2009

John T

Hi,
Anyone know how to resolve issue where Safari 4 has ridiculously long text area (>2000px)?

I believe it has to do with tinyMCE being instantiated on a text area that is hidden (or within an element which is hidden).

Any help would be appreciated

thanks,
John.

02 Nov 2009

Clamm

FIxed Safari 4 with:
[...]
// Register the command so that it can be invoked by using tinyMCE.activeEditor.execCommand('mceExample');
ed.addCommand('mceAutoResize', function() {

// Variables
var d = this.getDoc(), b = d.body, de = d.documentElement, DOM=tinymce.DOM, resizeHeight=this.springload.autoresize_min_height;

// SMPS:: FIX SAFARI AND SET TO 0 BEFORE
DOM.setStyle(this.springload.content_container, 'height', '0px');

// Get height differently depending on the browser used
(tinymce.isIE) ? myHeight = b.scrollHeight : myHeight = de.offsetHeight;

// Don't make it smaller than the minimum height
if(myHeight > this.springload.autoresize_min_height){
resizeHeight = myHeight;
}
[...]

26 Nov 2009

Jim Burrows

Has any thought been given to being able to set a maximum height that it would grow to? I'm editing text that can get really huge, and I love to have the window expand up to a certain point but no further.

JimB.

02 Dec 2009

Chris B

@Jon Glick:
If you're initializing TinyMCE in a hidden tab, as an alternative to display:none, you can hide your tabs with:

position: absolute;
left: -10000px;

This will hide your tab content and still allow TinyMCE to calculate the dimentions, etc...

02 Dec 2009

Chris B

@Jim:
One issue that I found was that when the window gets really tall, on a small screen (a laptop, etc..) the toolbar is inconveniently far away. For example if you need to insert an image, you'd place the caret in the text, and then scroll waaaaaay back to the toolbar - not the best configuration IMO...

A way around this would be to still let the height grow with the content, but when the toolbar scrolls out of view, have a copy of the toolbar float -always in view- where the buttons are handy (a similar functionality to the annoying banner ad at the bottom of this page: http://tools.seobook.com/keyword-tools/seobook/). Then when you scroll back to the original toolbar, the temporary one is removed.

31 Dec 2009

Hian

In IE8 the following problem occurs with auto_resize plugin in place and a lot of text:

High lighted text can not be colored or background colored. Bold and italic are fine. It occurs when I need to scroll up towards the editor's menu bar and the high lighted text moves "below" the bottom of the browser.

This problem does not occur in Firefox3.5.

For the time being I use a fixed height for the editor, thus the high lighted text stays always visible.

01 Jan 2010

john

Hello,
Great routine, thank you ! I'd like to have tinymce toolbar top AND bottom with long texts. have anybody an idea how to make such a trick ?

02 Feb 2010

Marty Jones

The autoresize plugin doesn't work correctly with IE 6 or IE 8. It adjusts a small amount but displays scrollbars. Do you have any suggestions on how to fix?

17 Feb 2010

Jaume

Hi!! I'm developing an app and I'm using tynimce too, I also have the scrolling problem so I tried to use your plugin but its not working.

I'm pretty new to tinymce so I don't know if its not working because I'm not using a browser or if its because I have a wrong config or something else :S.

Here's my config:

tinyMCE.init({
mode : "textareas",
theme : "advanced",
plugins : "style,layer,table,save,paste,directionality,nonbreaking,xhtmlxtras,eclipsebase,eclipselayers,eclipsetable,autoresize",
theme_advanced_toolbar_location : "external",
extended_valid_elements :"font[size|color|face|style]",
theme_advanced_buttons1 : "",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
//width: "100%",
//height: "100%"
});

Any tips? I'm really in the need to solve this :S Thank you! Best regards.

19 Apr 2010

Messia

to fix a bug in the browser CHROME, replace


// Get height differently depending on the browser used
(tinymce.isIE) ? myHeight = b.scrollHeight : myHeight = de.offsetHeight;


// Don't make it smaller than the minimum height



// Get height differently depending on the browser used
(tinymce.isIE) ? myHeight = b.scrollHeight : myHeight = de.offsetHeight;

var date = new Date();
var curDate = null;
do { curDate = new Date(); }
while(curDate-date < 100);
// Don't make it smaller than the minimum height

it simple js pause... it fix the bug)))))

26 Jun 2010

chris

In firefox it seems to not resize and remove my scrollbar :(

28 Jun 2010

Marco Avellaneda

Para mi este plugin simplemente nunca funciono en ningun explorador, elimine otros plugins, elimine otros parametros del inicio, carge el editor visible desde el principio y nunca funciono (solo desaparecia la barra de desplazamiento, eso es todo, no puedo creer que nadie tenga el mismo problema que yo, ni hablar

31 Aug 2010

Don

Typing was pretty slow with the autoresize enabled. I commented-out the onKeyUp event, and it's much faster now.

I'm not sure why onKeyUp was necessary since it still resizes as I'm typing (probably from the onChange event).

Other than that, this plugin is outstanding. Thank you!

20 Jan 2011

Kevin Turner

What's the current status of this plugin? TinyMCE ships with an "autoresize" plugin, that shares a lot of code with what's in autoresize-1.2.zip here, but things like the iframe onload handler aren't in TinyMCE repository.

So is autoresize-1.2 newer? To deploy, do I replace my existing tiny_mce/plugins/autoresize directory with this?

06 Mar 2011

Sacha

Thanks a ton for this plug-in! I didn't try the official TinyMCE autoresize thing, so I can't tell if there's a difference but this worked great.

17 Mar 2011

Pino

Good day to everyone!
I need someone to help me to create a plugin for tinyMce to upload and/or select images. It is similar to plugin advimage included into tinyMce, but with different fields.
What I would need is exactly according to this image: http://img534.imageshack.us/img534/4006/pluginv.jpg
All images have to be stored in a folder called "images", and thumbs in a subfolder called "thumbs".
Therefore, if I upload a new image or I select an image I should have the possibility to select alignment (see picture to understand what I mean).
Is there anyone able to do that?
My email address is pinonirvana@gmail.com.
Thank you and hear you soon...
Pino

24 Mar 2011

Shaun

Hello,

sadly, this plugin somehow deactivates the autofocus on the editor. Does anyone know, how i can get autofocus working again without removing the plugin? :)

Thanks!

28 Apr 2011

Shefik

When content is removed from the textarea, it does not autoresize back to the smaller height. It only works for increasing height. Can you also make it to decrease automatically? Thanks.

04 May 2011

geedee

the autoresizer sets overflow-y:hidden to do it's calculations but never resets it to overflow-y:auto. Where/How in my tinyMCE init can I specify a callback after the autoresizer is done?

04 May 2011

Peter Dekkers

Hey everyone.

Springload no longer maintains this plugin. It's now part of the standard TinyMCE distribution and is maintained by the TinyMCE team. Please download it from the official site and send any bug/feature requests to the TinyMCE team directly via either the forums or the bug tracker.

Cheers!

Love the web posts

Code

Design

General

Usability