获取多个 contenteditable div 中的最新插入符号位置，并将图像附加到光标最后出现的 div

Question

我需要根据最近编辑的事实在多个内容可编辑的 div 中附加一个图像。此外，contenteditable div 本身包含 HTML（不仅仅是文本），因此这些 div 中可能存在多个节点。为了更正确地理解这个问题，这里是link to jsfiddle

$('#img-div').on('click',function(){
  //logic for appending according to latest caret position

  //if caret wasnt in any content editable div then do this
  $('#div-4').append($(this).html());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col" id="img-div">
      <img src="https://creww.io/assets/images/creww-coin.png">
    </div>
    <div class="col">
       <div contenteditable="true" id="div-1">
          Div 1 here
       </div>
       <div contenteditable="true" id="div-2">
          Div 2 here
       </div>
       <div contenteditable="true" id="div-3">
          Div 3 here
       </div>
       <div contenteditable="true" id="div-4">
          Div 4 here
       </div>
    </div>
  </div>
</div>

Answer 1

你可以在最后出席mouseover活动。

$('#img-div').on('click',function(){
 

  //if caret wasnt in any content editable div then do this
  lastDiv.append($(this).html());
  //$('#divApp').append(lastDiv.html());
 
});

 //logic for appending according to latest caret position
var lastDiv;
$('div[id*="div-"]').mouseover(function() {
lastDiv =$( this );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col" id="img-div">
      <img src="https://creww.io/assets/images/creww-coin.png">
    </div>
    <div class="col">
       <div contenteditable="true" id="div-1">
          Div 1 here
       </div>
       <div contenteditable="true" id="div-2">
          Div 2 here
       </div>
       <div contenteditable="true" id="div-3">
          Div 3 here
       </div>
       <div contenteditable="true" id="div-4">
          Div 4 here
       </div>
    </div>
    <div id="divApp"></div>
  </div>
</div>