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!

Just to be clear to anyone else, if you copy Richtext with images and what not and paste it into the div, it shows you the rendered html. — gideon, Dec 08 '12 at 14:28
there sre numerous plugins you can use to make textarea height dynamic — charlietfl, Dec 08 '12 at 14:32
@gideon I want it to expand just like facebook and Google+ . google also uses the above technique to expand div which have contenteditable to true when large amount of text is typed or pasted but they also have a feature that there is no HTML in textarea when text which contains HTML is pasted in it! I want only that man! I have been trying to get a solution for 3 hours man! — Muhammad Talha Akbar, Dec 08 '12 at 14:34
man but that plugins only expand one textarea! i am developing a social site where there are posts all around so every post have textarea of add comment! if anybody have any solution related to this contenteditable div or that plugins please tell me! — Muhammad Talha Akbar, Dec 08 '12 at 14:37
there is nothing that limits a plugin to use on just one textarea — charlietfl, Dec 08 '12 at 14:52

score 3 · Answer 1 · edited May 23 '17 at 12:05

3

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');
});

edited May 23 '17 at 12:05

Community

1
1

answered Dec 08 '12 at 16:48

Chris Like

280
1
8

My answer is more of an "in theory, if you wanted to restrict what a content-editable box could accept, this is what you would use." The answer below, by abhishek77in is the correct way to solve this issue. For a more seamless option, let me recommend this jQuery autogrow plugin: https://github.com/ultimatedelman/autogrow – Chris Like Dec 09 '12 at 12:36
1

awesome! man this plugin is compatible with all textareas thanks to Allah and salute to you that you were chosen to help me! :) – Muhammad Talha Akbar Dec 09 '12 at 15:16

how to disable elements in contenteditable div?

1 Answers1