div输入文字后根据光标位置插入上传图片

要在`<div>`中根据光标位置插入上传图片，需要使用`Range`对象和`insertNode()`方法来将图片插入到光标所在位置。以下是一个示例代码：

<div contenteditable="true" onkeydown="handleKeyDown(event)">
  在这里输入文字或插入图片
</div>

<script>
function handleKeyDown(event) {
  // 如果用户按下了Ctrl+V，表示要粘贴内容
  if (event.ctrlKey && event.keyCode == 86) {
    // 阻止浏览器默认的粘贴操作
    event.preventDefault();
    // 获取粘贴板中的文件
    var items = (event.clipboardData || event.originalEvent.clipboardData).items;
    for (var i = 0; i < items.length; i++) {
      var item = items[i];
      // 如果是文件类型，表示用户正在上传图片
      if (item.kind == 'file') {
        var file = item.getAsFile();
        // 读取文件数据并将其插入到光标位置
        var reader = new FileReader();
        reader.onload = function(event) {
          var img = document.createElement('img');
          img.src = event.target.result;
          insertNodeAtCursor(img);
        };
        reader.readAsDataURL(file);
      }
    }
  }
}

function insertNodeAtCursor(node) {
  var range, html;
  if (window.getSelection && window.getSelection().getRangeAt) {
    range = window.getSelection().getRangeAt(0);
    range.insertNode(node);
  } else if (document.selection && document.selection.createRange) {
    range = document.selection.createRange();
    range.pasteHTML(html);
  }
}
</script>

在上面的代码中，我们使用`onkeydown`事件来监听用户的按键操作。如果用户按下了Ctrl+V，表示要粘贴内容，我们就会阻止浏览器默认的粘贴操作，并获取粘贴板中的文件数据。然后，我们使用`FileReader`对象来读取文件数据，并将其插入到光标位置。最后，我们使用`Range`对象的`insertNode()`方法来将图片节点插入到光标所在位置。