Co sprawia, że ​​redaktorzy wklejają dane do textarea jako html-like w bogatych edytorach WYSIWYG?

Question

Chcę skopiować/wkleić html ze stron internetowych i przechowywać je w bazie danych mysql. Aby to zrobić, wyewidencjonowałem CKEditor, który pozwala mi wklejać html, nawet dokumenty tekstowe i generuje dla niego kod html. Ponieważ wszystko, czego chcę, to "generowanie" wklejonych danych jako html, zamiast używania pełnego edytora WYSIWYG, jak CKEditor, chcę napisać jakiś kod (być może z jquery), aby przekonwertować wklejone dane na tagi html i formatowanie.

Aby uzyskać tę funkcjonalność, co robią redaktorzy online? W jaki sposób konwertują dane schowka do kodu html? Dlaczego dostaję tylko tekst, gdy wklejam tekst sformatowany w formacie html lub divy lub przyciski do tego tekstu tutaj, a obrazy i odpowiednio dobrane elementy div na edytorach WYSIWYG?

Czy edytorzy uzyskują dostęp do danych schowka i manipulują nim? Czy schowek zapisuje dane formatowania w sposób zorganizowany, umożliwiając "manipulowanie" przez "CKEditor" lub inne?

Czy można to zrobić za pomocą jQuery? Czy też potrzebujemy kodu po stronie serwera?

Jeśli możesz rzucić trochę światła na te tematy, byłbym wdzięczny. Chcę tylko poznać tę metodę, aby napisać odpowiedni kod.

Dla porównania: http://ckeditor.com/demo

Answer 1

Oto surowy demo, która działa w Chrome, IE9 i Safari: http://jsfiddle.net/SN6PQ/2/

<div contenteditable="true" id="paste-target">Paste Here</div>​ 

$(function(){ 
    $("#paste-target").on("paste", function(){ 
     // delay, or else innerHTML won't be updated 
     setTimeout(function(){ 

      // option 1 - for pasting text that looks like HTML (e.g. a code snippet) 
      alert($("#paste-target").text()); 

      // option 2 - for pasting actual HTML (e.g. select a webpage and paste it) 
      alert($("#paste-target").html()); 
     },100); 
    });   
});​ 

Nie jestem pewien, czy to jest to, czego po, ale ostrzega HTML na pastę. Pamiętaj, że edytowalny element może zmienić znacznik na wklejeniu.