Autoresize the content area?

[wvl]

Is there any way to auto resize the editing area based on the size of the content?

[gabrielengel]

Fiddle: http://jsfiddle.net/gabito/jnSPf/6/ Unminified source: https://gist.github.com/raw/4452703/d12b7426cdadc03273e19708eca454613fb83928/wysihtml5_autoresize.js

• Works on IE9! \o/

[Dayjo]

Great addition gabrielengel. Haven't run into any issues with it so far though will certainly be doing some extensive testing later. What would be lovely would be the ability to use something like:

editor.on('resize:editor', myfunction);

... to actually be able to adjust the rest of the DOM accordingly when the editor is resized.

[gabrielengel]

@LooseRoots sounds good, I will look into it later :)

[gabrielengel]

Still did not work on @LooseRoots request, will try to do this week.

Meanwhile, can I make a pull request for this changes? cc @tiff

[fxck]

How about max height..

[veesahni]

@gabrielengel pressing enter at the end of the content seems to add one line of space too much.. as a result, typing anything after hitting enter at the end results in the box getting shrunk.

See fiddle: http://jsfiddle.net/GU4XV/1/

The fix is to change how   is inserted in getWholeHeight():

  function getWholeHeight(data, firstNode){
    // Text element, wrap up in a paragraph to get height.
    if(data == "") {
      data = " "
    }
    var content = '<div>'+ data +'</div>';
    var node = firstNode.insertAdjacentHTML('afterbegin', content);
    var response = getHeight(firstNode.firstElementChild);

    // Remove element not to affect editing.
    firstNode.removeChild(firstNode.firstElementChild);
    return response;
  }

[gabrielengel]

Hi veeshani, I still didn't test your code. Will try to do over the wkend.

Adding the nbps won't add an extra character to every new paragraph?

[veesahni]

@gabrielengel the old code was already adding nbsp:

var content = '<div>'+ data +' &nbsp;</div>';

From my testing, it appears this is to ensure that there is always at least 1 line (otherwise the resize() results in the iframe being smaller than the cursor). My modification basically optimizes for this specific case instead of always adding  

[Burkazoid]

Have you guys tried this in Chrome with Skype installed? (specifically Skype Click-to-call plugin). It completely kills the browser, as well as giving bad results (i.e. incorrect heights). I'm guessing it's because there's content being added, updated and removed to the dom very often, so Skype is probably trying to analyse this each time.

Disabling the plugin solves the problem, but since Skype + Chrome are very common, it's quite a problem.

[smidwap]

Folks, I put together a little jQuery plugin to handle resizing wysihtml5 editors. You can find it at https://github.com/smidwap/wysihtml5_size_matters/. I've been using it for several successful weeks on Lesson.ly (www.lesson.ly)

I'm not sure it's the responsibility of the wysihtml5 to include auto-resizing capabilities. There are several ways to solve the problem, and the solution may need to be tweaked to cover all use cases. So I think it makes sense to work on the problem in a separate project.

Please give it a try and report any issues you find.

[Miserlou]

Everybody in this thread is awesome. @smidwap I'm trying out your code now, will report back with any issues.

[Dkendal]

You can do this in css3:

iframe { 
  resize: both;
}

:)

[smidwap]

@Dkendal That won't autosize the content area, only allow the user to expand the text editor. Not what we're after.

[dzbo]

Seems @smidwap is best for now, works great!

[ARH3]

Thanks @smidwap I just implemented your plugin and it works great! For people who want even simpler code for the implementation, I did it this way:

    $('#fancy-textarea').wysihtml5();
    $('iframe.wysihtml5-sandbox').wysihtml5_size_matters();

The "iframe.wysihtml5-sandbox" selector, as far as I can tell, is part of every single wysihtml5-enabled textarea, so it will make them all expandable. Wahoo!

[smidwap]

@ARH3 thanks for the kind words. That might work when using the wysihtml5 jQuery plugin, but you need to be sure that the editor is loaded into the DOM before calling wysihtml5_size_matters. In other words, `iframe.wysihtml5-sandbox' may not exist yet...maybe the jQuery plugin makes the load synchronous though.

[ARH3]

Right - so to clarify I DID use the wysihtml5 jQuery plugin (also uses bootstrap, see <a href=https://github.com/jhollingworth/bootstrap-wysihtml5/">here) and wrapped that in a jQuery document.ready function:

$(document).ready(function() {
     $('#fancy-textarea').wysihtml5();
     $('iframe.wysihtml5-sandbox').wysihtml5_size_matters();
});

All working together very smoothly!

[brettjonesdev]

@smidwap thanks so much for wysihtml5_size_matters! I used it to replace a horrible, horrible hack which previously attempted (largely unsuccessfully and by resorting to intervals) to do the same thing. Killer!

[kurtfunai]

@smidwap Thank you again - exactly what I needed in this case.

[simple10]

Here's a working solution for auto-resizing that doesn't require any modifications to wysihtml5.

It seems to be handling image inserting, pasting, and deleting pretty well. Please let me know if you find any edge cases or bugs. I have a few production sites I'd like to use this in if it passes browser tests.

Here's the relevant commit... https://github.com/simple10/bootstrap-wysihtml5-sass/commit/eb5ab6f0722349c6962be9ff823ff4e2f2cbc843

I haven't tested it in all browsers yet, but it should be 90% of the way there. I hope. ;-)

[nevf]

The vertical scrollbar in the editor keeps flashing on & off when the resize occurs. This is on the current Chrome in Win8.

[simple10]

@nerf The flashing is in part due to the debouncer delay. The scrollbar appears as normal while the user types and the resizing happens when there's a delay. The flashing is not as noticeable on OSX. Maybe we can just hide the scrollbars. I'll have to do some compatibility testing and post a fix tomorrow.

[lafeber]

@smidwap do you have any idea why your plugin doesn't work in IE (all versions?) It works fantastic in normal browsers though.

[smidwap]

Just tried it on IE9, seems to work just fine. Are you getting any console errors?

On Wed, Nov 13, 2013 at 6:09 PM, Martijn Lafeber notifications@github.comwrote:

@smidwap https://github.com/smidwap do you have any idea why your plugin doesn't work in IE (all versions?) It works fantastic in normal browsers though.

— Reply to this email directly or view it on GitHubhttps://github.com/xing/wysihtml5/issues/18#issuecomment-28386362 .

[modusinternet]

Can someone point me to a working version of this solution or update me on the status of this feature please? I can find a working example of it anywhere now.

[kurtfunai]

@modusinternet @smidwap's https://github.com/smidwap/wysihtml5_size_matters/ worked great for me

[Dayjo]

Does anyone have a NON-JQUERY solution to this yet?

[benbonnet]

none works anymore with the latest updates :/

[kurtfunai]

@bbnnt could you elaborate a bit? The wysihtml5_size_matters is still working for me with this project.

I did run into a few bugs in the wysihtml5 library recently, where the cursor would go back to the previous line after pressing return. I fixed it by following https://github.com/xing/wysihtml5/issues/497

Also, the repo here is not maintained anymore. The latest commit in this project is two years old. There is an active version of this project at http://edicy.github.io/wysihtml5/ It seems to have auto-resizing of the content area by default.

Hope that helps!

[benbonnet]

Ok my bad I'll have a further look!