How to disable elements in contenteditable div?

Question

I have a div with attribute contentEditable to true!

I did this because I wanted it to act as a text field that changes its height to fit its text! Works perfect

But , when I copy the hyperlink and paste it into my div instead of plain text, it has an anchor element ... The same thing with the other, if I select part of a website and paste it into a contenteditable div it shows all the HTML. I want the div to display only plain text and disable all elements in it!

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

Just copy any HTML code in it and it will also display youdiv with that HTML. I want this to be disabled and the div is just plain text!

Answer 1

If you add an event listener to an editable content div, you can use jQuery to replace RichText with PlainText. I started the event listener from balupton here: fooobar.com/questions/21879 / ....

 $('[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'); });​