Inline Editing

[webPragmatist]

I am trying to instead of create an iframe with a scolling area actually create an inline editor (so it looks like you are actually changing the content on the page.

I basically just need for the textarea/iframe to grow (in height) as more content is entered.

Any help will be appreciated. I tried removing the iframe and textarea hights but it still has some default height and still scrolls.

nicEdit supports this sort of thing http://www.nicedit.com/demos.php?demo=4

[webPragmatist]

Looks like this is harder than it seems... About the only thing I found on resizing iframes to fit the parent page container is:
http://sonspring.com/journal/jquery-iframe-sizing

Which seems to be rather hackish... Is it possible to swap out the iframe element and make a div or some other element editable instead? That's what nicEdit seems to do.

[Jaymon]

While there is no way to bind an onChange event to an iFrame, you can sort of simulate it using setInterval().

Here is what I did, placing this code in the postInit function customization:

Code: Select all

// check the iFrame's height and resize it appropriately every 3 seconds...
var iframe = $(wym._box).find(".wym_iframe").find('iframe').get(0);
$(iframe).height(iframe.contentWindow.document.body.scrollHeight + 100);
var si_id = setInterval(function(){
  $(iframe).height(iframe.contentWindow.document.body.scrollHeight + 100);
},3000);

basically, what this does is change the actual height to that of the iFrame's scrollHeight every 3 seconds, works great in Firefox 3+. You can change the interval from 3 seconds to whatever by changing the 3000 to some other value, every 1000 is equivalent to 1 second.