Вставьте изображение и текст из Microsoft Word в ContentEditable div

Question

Мне нужно вставить содержимое из Microsoft Word в div ContentEditable.

Выбор только изображения и вставка работ. Выбор только текста и вставка в div тоже работает. Однако выбор всего документа, который может быть смесью некоторых изображений и текста, заставляет его отображать изображения с помощью src, указывающего на локальный файл во временной папке. Это происходит во всех браузерах, кроме Internet Explorer.

Изображение, указывающее на временный файл, бесполезно, потому что файл исчезнет через некоторое время. Так что мне нужно это как изображение base64.

Следующий код работает в Edge при открытии с локальной машины:

var pasteDemo = document.getElementById("pasteDemo");
pasteDemo.onpaste = function(e) {
  var items = (e.clipboardData || e.originalEvent.clipboardData).items;
  var imgidx = -1;
  for (var i = 0; i < items.length; i++) {
    var item = items[i];
    // console.log(item);
    if (item.kind == 'file' && item.type.indexOf('image') >= 0) {
      imgidx++;
      var reader = new FileReader();
      reader.onload = function(e) {
        setTimeout(function() {
          // setTimeout so that clipboard images gets a chance to get converted to <img> elements.
          var img = pasteDemo.getElementsByTagName('img')[imgidx];
          if (!img) {
            // to handle image paste in Chrome & Edge, since they don't create a <img> element at all
            img = document.createElement('img');
            pasteDemo.appendChild(img);
          }
          img.src = e.target.result;
        }, 10);
      }
      reader.readAsDataURL(item.getAsFile());
    }
  }
  // images that still have src="file:///..."
  setTimeout(function() {
    var images = pasteDemo.getElementsByTagName("img");
    for (var i = 0; i < images.length; i++) {
      if (images[i].src.indexOf('file:///') >= 0) {
        convertToBase64(images[i]);
      }
    }
  }, 100);
}

function convertToBase64(img) {
  var xhr = new XMLHttpRequest();
  xhr.onload = function() {
    var reader = new FileReader();
    reader.onloadend = function() {
      img.src = reader.result
    };
    reader.readAsDataURL(xhr.response);
  };
  xhr.responseType = 'blob';
  xhr.open('GET', img.src);
  xhr.send();
}

#pasteDemo {
  min-height: 100px;
  min-width: 100px;
  border: 1px solid blue;
  padding: 5px;
}

<span>Paste your content in the box below...</span>
<div contenteditable="true" id="pasteDemo"></div>

Однако это не решает проблему, поскольку страница должна быть размещена на веб-сервере. Кроме того, проблема все еще остается с Chrome, Firefox и другими браузерами, где они показывают ошибку в консоли, которая выглядит примерно так:

Блокировка перекрестного запроса: та же политика происхождения запрещает чтение удаленного ресурса в файле:///C:/Users/PRADEE~1/AppData/Local/Temp/msohtmlclip1/01/clip_image002.jpg. (Причина: запрос CORS не http).

Любые идеи, как это исправить, или любой другой альтернативный метод, который будет работать?