What makes editors paste data in textarea as html-like in rich wysiwyg editors?

Question

I want to copy / paste html from websites and save them in mysql database. To do this, I checked CKEditor, which allows me to embed html, even text documents, and it generates html code for it. Since all I want to do is “generate” the inserted data as html, instead of using a full wysiwyg editor such as CKEditor, I want to write some code (possibly with jquery) to convert the inserted data into html tags and formatting.

To achieve this functionality, what do these online editors do? How do they convert clipboard data to html code? Why do I only get text when I paste html formatted text or divs or buttons into this text area here, as well as images and the correct div sizes on wysiwyg editors?

Do editors access and manipulate clipboard data? Does the clipboard save formatting data in an organized manner, allowing CKEditor or other people to manipulate it?

Can this be done using jQuery? Or do we need server code?

If you can shed light on this topic, I would appreciate it. I just want to know the method so that I can write the appropriate code for it.

For reference: http://ckeditor.com/demo

Answer 1

Here is a rough demo that works in Chrome, IE9 and 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 (eg a code snippet) alert($("#paste-target").text()); // option 2 - for pasting actual HTML (eg select a webpage and paste it) alert($("#paste-target").html()); },100); }); });​ 

Not sure if this is what you need, but it warns HTML about pasting. Keep in mind that an editable content element can change the markup on an insert.