Was macht Editoren Daten in Textarea als HTML-Like in Rich-Wysiwyg-Editoren?

Question

Ich möchte HTML von Websites kopieren und einfügen und sie in MySQL-Datenbank speichern. Um dies zu tun, habe ich CKEditor ausgecheckt, die es mir erlaubt, HTML, sogar Word-Dokumente einzufügen, und es generiert HTML-Code dafür. Da ich nur möchte, dass die eingefügten Daten als HTML "generiert" werden, anstatt einen vollständigen WYSIWYG-Editor wie CKEditor zu verwenden, möchte ich Code (vielleicht mit jquery) schreiben, um die eingefügten Daten zu HTML-Tags und Formatierung zu konvertieren.

Um diese Funktionalität zu erreichen, was tun diese Online-Editoren? Wie konvertieren sie die Zwischenablage Daten in HTML-Code? Warum bekomme ich nur Text, wenn ich html-formatierten Text oder divs oder Buttons in dieses Textfeld hier einfüge und Bilder und richtig große divs auf WYSIWYG-Editoren?

Haben die Redakteure Zugriff auf die Daten der Zwischenablage und manipulieren sie? Speichert die Zwischenablage Formatierungsdaten in einer organisierten Weise, so dass der "CKEditor" oder andere sie manipulieren können?

Kann dies mit jQuery getan werden? Oder brauchen wir auch serverseitigen Code?

Wenn Sie etwas Licht auf diese Themen werfen können, würde ich es schätzen. Ich möchte nur die Methode kennen, damit ich entsprechenden Code dafür schreiben kann.

Zum Vergleich: http://ckeditor.com/demo

Answer 1

Hier ist eine grobe Demo, die in Chrome, IE9 und Safari funktioniert: 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); 
    });   
});​ 

Nicht sicher, ob dies ist, was Sie nach, aber es warnt HTML auf Paste. Beachten Sie, dass ein editierbares Inhaltselement das Markup beim Einfügen ändern kann.