Che cosa rende gli editori incolla dati su textarea come html -like in ricchi editor wysiwyg?

Question

Voglio copiare/incollare html dai siti Web e memorizzarli nel database mysql. Per fare questo ho controllato CKEditor che mi permette di incollare html, anche documenti word e genera codice html per questo. Dato che tutto ciò che voglio è "generare" i dati incollati come html, invece di usare un editor wysiwyg completo come CKEditor, voglio scrivere del codice (magari con jquery) per convertire i dati incollati in tag e formattazione html.

Per ottenere questa funzionalità, cosa fanno questi editor online? Come convertono i dati degli appunti in codice html? Perché ottengo solo il testo quando incollo il testo formattato in html o div o pulsanti in questa textarea qui e immagini e div correttamente dimensionati su editor wysiwyg?

Gli editor accedono ai dati degli appunti e li manipolano? Gli appunti salvano i dati di formattazione in modo organizzato permettendo al "CKEditor" o ad altri di manipolarlo?

Questo può essere fatto con jQuery? O abbiamo anche bisogno del codice lato server?

Se riesci a far luce su questo argomento, lo apprezzerei. Voglio solo conoscere il metodo in modo che io possa scrivere il codice appropriato per questo.

Per riferimento: http://ckeditor.com/demo

Answer 1

Ecco un demo grezzo che funziona in Chrome, IE9 e 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); 
    });   
});​ 

Non sono sicuro se questo è quello che cercate, ma avverte HTML pasta. Tieni presente che un elemento modificabile del contenuto può modificare la marcatura su incolla.