come disabilitare gli elementi in div contenteditable?

Question

Man I have a div con attributo di contentEditable su true!

L'ho creato perché volevo che si comportasse come una textarea che modifica la sua altezza in base al suo testo! Funziona perfettamente

Ma quando copio un collegamento ipertestuale e incollarlo nel mio div invece di essere solo testo che ha elemento di ancoraggio ... Lo stesso vale per altri se seleziono una parte di qualsiasi sito web e incollarlo in quel div contenteditable mostra tutto l'HTML. Voglio che div divenga solo testo e disabiliti tutti gli elementi in esso!

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

Basta copiare qualsiasi codice HTML in esso e mostrerà anche youdiv con quello HTML. Voglio che sia disabilitato e div per mostrare solo testo in chiaro!

Answer 1

Se si aggiunge un listener di eventi al div contenuto modificabile, è possibile utilizzare jQuery per sostituire RichText con PlainText. Ho intercettato l'evento listener da balupton qui: 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'); 
});​