contenteditable: Detect element changes when using row/column modifier

Question

I used the following code from a previous posting to detect (most of) the changes to an element with attribute "contenteditable". But sadly it does not include the changes to tables that occur when using the table row/column modifier controls provided by the browser (Firefox)

    $('[contenteditable]').live('focus', function() {
       var $this = $(this);
       $this.data('before', $this.html());
       return $this;
    }).live('blur keyup paste', function() {
       var $this = $(this);
       if ($this.data('before') !== $this.html()) {
           $this.data('before', $this.html());
           $this.trigger('change');
       }
       return $this;
    });

How can I change this code to include the detection of changes imposed by the browser controls?

Answer 1

As a workaround I've done the following

1. I've added an event listener for DOMSubtreeModified to the element.
2. It fires very often, so I have added a setTimeout delay
3. In the delayed function I check if the content of the element has changed with the same method using $(this).data() as mentioned above.

This is a bit dirty, but it does the trick.