ASP.Net MVC：如何将剪贴板数据发送到web api

Question

我必须在我的MVC项目中使用HTML编辑器，用户可以将图像数据从剪贴板粘贴到HTML编辑器。当用户将图像粘贴到HTML编辑器中的光标位置时，将显示一个忙图标，剪贴板数据将传递给Web API，将该图片数据保存到Web服务器的图片文件中，并将该图像文件URL返回给客户端。客户将使用实际图像URL替换忙图标图像。

现在我对这个问题有一些疑问。我以前从未做过这样的工作。

1. 我应该使用哪种HTML编辑器？
2. 如何在HTML编辑器中按照光标位置显示忙碌图标？
3. 如何通过JavaScript或jQuery捕获粘贴的图像数据？
4. 如何将粘贴的图像数据发送到Web API以将其保存在Web中的文件中 服务器由jQuery？

我参考了这篇文章How does the paste image from clipboard functionality work in Gmail and Google Chrome 12+?，但没有正确理解如何在我的场景中使用：

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);
  }
}

一个类似的jsfiddle链接无效Jsfiddle link

请详细指导我。感谢。

这里有一个屏幕截图。它有助于其他人了解我在寻找什么。