Paste clipboard HTML data and keep CSS and images

Question

I copy an wikipedia article consiting of images and text. I paste it in to div that is set to contenteditable="true". I can see the pasted material like it looks at wikipedia.

How can I save the content of that div and include the styling and the images now it is only text that I can save? Save it e.g. as an object that could be sent to the service.

js fiddle

html

<div class="inputdiv"contenteditable="true"> paste here </div>

Answer 1

You can retrieve the contents of the div using jQuery and post it with an ajax request to the service. E.g:

(function($){
    $(function(){
      var html = $(".inputdiv").html();

        var jqxhr = $.post( "http://www.url-of-service.com", {input: html})
        .done(function() {
          alert( "success" );
        })
        .fail(function(jqXHR, errorMsg) {
            alert( "error: " + errorMsg);
        });
    });
})(jQuery);

Fiddle: http://jsfiddle.net/PpaS8/1/

Make sure you put the correct url of the service instead of http://www.url-of-service.com and the correct key for the post var instead of input:.