获取多个可编辑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

你可以呈现lastly 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>

​