how to disable elements in contenteditable div?
css, html, javascript, jquery
Solution
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');
});
Problem
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!