我正在尝试在当前光标/插入符号位置设置/粘贴图像。我使用的是div，它将contenteditable设置为true

CSS是这样设置的：

<div class="container">
  <div class="row">
    <div class="col">
      <nav></nav>
    </div>
  </div>
  <div class="row d-flex justify-content-center">
    <div id="editor" class="col-md-6" contenteditable="true"></div>
  </div>
</div>

我正在使用我在另一个StackOverflow帖子中找到的JavaScript函数来获取当前的插入符号位置。

<代码>函数GetCaretPosition（）{变量X=0；变量y=0；var sel=window.getSelection（）；if（sel.rangeCount）{var range=sel.getRangeAt（0）.cloneRange（）；if（range.getClientRects（））{range.collapse（true）；Var rect=range.getClientRects（）[0]；如果（rect）{Y=矩形顶部；X=左直；}}}返回{X：X，是：是，};}

我在一个key-down事件侦听器中使用这个函数来捕获何时粘贴图像。例如，我们的想法是在用户按下Ctrl+Q时粘贴。

<代码>编辑器.addEventListener（'按键按下'，（事件）=>；{const keyname=event.key；if（keyname===' control '）{返回；}如果（事件.CtrlKey）{if（keyname==' Q '）{Var image=document.createElement（' IMG '）；image.SRC=' IMG/bird.JPG '；image.style.width=' 200px '；image.style.position='绝对'；image.style.top=getCaretPosition（）.y；image.style.left=getCaretPosition（）.X；editor.appendChild（图片）；}}},错误);

了以下事情：

1. 如果文本字段为空，则图像仅粘贴在第一行的当前插入符号位置。如果我按Enter键并转到接下来的几行，图像将粘贴到当前行下面的一行。
2. 如果我在第一行中输入内容，则将插入符号放在另一个位置，例如第一行的开头，图像将粘贴在行尾，而不是插入符号的位置。

我希望它能够将图像的左上角粘贴在当前插入符号的位置。如果有文本，则希望在图像之后移动/移位它们，就好像它们在为图像腾出空间一样。

谢谢你的想法。

顺晟科技：