Love the web

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!

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

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

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

Great ! Thank you for the fast release ! John

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

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

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

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

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.

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.

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.

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.

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.

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

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!

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

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

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

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

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?

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

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.

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

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.

Works well after updating tinyMCE sorry about that,

thanks again.

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.

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

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

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

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,

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?

Hi,

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

Cheers,
Thomas

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.

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;
}
[...]

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.

@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...

@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.

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.

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 ?

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?

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.

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

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

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

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!

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?

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.

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

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!

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.

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?

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!