Add a rich text area in your html form

It's easy for us lazy developers to just throw in a textarea to gather chunks of input from a user. But the problem with a textarea is that it sends plain text to your web app. You lose any kind of formatting if your user copies and pastes html into a textarea. That's no good. A good paste, though, will preserve formatting and structure so you can process it on the server.

Ralph knows the value of good paste.

But good news! Making a rich text area is easier than you'd think. So the thing to do is to allow your users to copy and paste into a rich text area if you want to process formatted input on your server. Here's how.

1. Create an iframe inside your form. Forget about textarea; we want to make an iframe that users can paste into. And while we're here, just add an empty hidden input field as well (more on this hidden input field in step 3).

<form id="form" action="/process">
  <iframe id="paste"></iframe>
  <input type="hidden" id="data" />
  <input type="submit" />
</form>

2. Write some javascript. An iframe is not editable in its default state. To make the iframe editable, you need to set the iframe's content document's designMode="on" after the iframe loads. I'm using prototype for this chunk of javascript:

<script type="text/javascript">
  document.observe('dom:loaded', function() {
    // make the iframe editable.  ff and safari use contentDocument;
    // ie7 uses contentWindow.document
    var doc = $('paste').contentDocument || $('paste').contentWindow.document;
    doc.designMode = 'on';
  }
</script>

3. Almost done. You need just a bit more javascript. Since an iframe isn't an input field, its contents won't be submitted as part of the form. So you need to do a little bit of javascript trickery to populate the hidden field you added in step 1 with the iframe's content. Here's the full javascript, which includes the bits from step 2.

<script type="text/javascript">
  document.observe('dom:loaded', function() {
    // make the iframe editable.  ff and safari use contentDocument;
    // ie7 uses contentWindow.document
    var doc = $('paste').contentDocument || $('paste').contentWindow.document;
    doc.designMode = 'on';

    // populate the hidden field with the iframe's contents to submit
    // it with the form
    $('form').observe('submit', function() {
      var html = doc.body.innerHTML;
      $('data').value = html;
    });
  }
</script>

4. And, remarkably, that's it. You're done. Now when a user submits the form, javascript will populate the hidden field with the iframe's contents and then send that to the server's /process action.

One (big) caveat, though. Different browsers and different platforms submit different styles of html. It's easy to get into the undesirable mode of writing browser/platform dependent code for your web app if you misuse this iframe thing.

Comments

[Sujit]

Hey I tried this code. I am not able to make the iFrame editable....
did all whats mentioned here, but with no results.

[Sujit]

It's working!! just a small piece is missing from the javascript code. An ending bracket with the semicolon. That's it....it's working fine now!
huned it would be nice if you can show us how to create an WYSIWYG editor which can have colors and images also!!

[Krishan Kumar]

hi,
i used this code by adding the brackets and semicolon at the last in javascript but it didn't work ? y

[Jørund Ruud]

Remember linking the prototype script somwhere in your code!

:D

[asdasd]

asdasdas

[Jauko]

Is it possible to copy&paste screenshots in it as well. I am trying, but doesnt seem to work?

[Gerad Suyderhoud]

Screenshots don't really work. Depending on the browser, you can get them to show up, but usually it's a link to a local file on the user's hard drive.

[Pico RG]

Really nice code. But whats up with the Ralph character? Can you add some real screenshots?