how to disable elements in contenteditable div?

Question

Man I have a div with attribute of contentEditable to true!

I made it because I wanted it to act like a textarea which changes its height according to its text! Works Perfect

But when I copy a hyperlink and paste it in my div instead of being plain text it have anchor element...Same with other if I select some part of any website and paste it in that contenteditable div it shows all the HTML. I want that div to show only plain text and disable all elements in it!

Working Fiddle: http://jsfiddle.net/4ctVx/

Just Copy any HTML in it and it will also show youdiv with that HTML. I want that to be disabled and div to show only plain text!

Answer 1

If you add an event listener to the editable content div, you can use jQuery to replace RichText with PlainText. I snagged the event listener from balupton here: https://stackoverflow.com/a/6263537/1887483.

$('[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;
});
//use this jQuery snippet to swap HTML for Text.
$('.editableContent').live('change', function() {
    $(this).html($(this).text());
    alert('changed');
});​