masai women

masai women, originally uploaded by hunedx. rainy season on the serengeti. tanzania, africa.

Add a rich text area in your html form

i wrote this for swivel, back in september 2008. original article. just found it on my computer and wanted to delete it. but i’m reposting it it first so it doesn’t get lost.

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.

more better histogram

more better histogram, originally uploaded by hunedx.

difference between two arrays in javascript

something like so:

Array.prototype.difference = function(other) {
  var a = this.inject($H(), function(h, v) {
    h.set(v, true);
    return h;
  });
 
  other.each(function(v) {
    this.unset(v);
  }.bind(a));
 
  return a.keys();
}

which lets you do this:

>>> [2,3,4].difference([5,6,7])
2,3,4
>>> [2,3,4].difference([5,6,7,4])
2,3
>>> [2,3,4].difference([2,3,4])
[]

typetty type

fuzzy math

perfect for what i need at the moment.

>> s = "$4.2 million USD USA Dollars".to_currency_i
=> 4000000