ASP.Net MVC: How to send clip board data to web api

Question

i have to work with HTML editor in my MVC project where user will be allow to paste image data from clip board to HTML editor. The moment user will paste the image then in cursor position in HTML editor a busy icon will be show and clip board data will be passed to web API which save that picture data into picture file in web server and return that image file URL to client. Client will replace busy icon image with actual image URL.

Now I have some query on this issue. I have never done this kind of job before.

1. Which HTML editor I should use?
2. How to show busy icon as per cursor position in HTML editor?
3. How to capture pasted image data by JavaScript or by jQuery?
4. How send pasted image data to web API to save it in file in web server by jQuery?

I consult this post How does the paste image from clipboard functionality work in Gmail and Google Chrome 12+? but do not properly understand how to use in my scenario:

document.getElementById('pasteArea').onpaste = function (event) {
  // use event.originalEvent.clipboard for newer chrome versions
  var items = (event.clipboardData  || event.originalEvent.clipboardData).items;
  console.log(JSON.stringify(items)); // will give you the mime types
  // find pasted image among pasted items
  var blob = null;
  for (var i = 0; i < items.length; i++) {
    if (items[i].type.indexOf("image") === 0) {
      blob = items[i].getAsFile();
    }
  }
  // load image if there is a pasted image
  if (blob !== null) {
    var reader = new FileReader();
    reader.onload = function(event) {
      console.log(event.target.result); // data url!
      document.getElementById("pastedImage").src = event.target.result;
    };
    reader.readAsDataURL(blob);
  }
}

One similar jsfiddle link not working Jsfiddle link

Please guide me in detail. Thanks.

Here one screen shot. It help other to understand what I am looking for.