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

Question

我需要根据最近编辑过的事实在多个内容可编辑的div中添加一个图像。 另外，contenteditable div本身包含HTML（不仅是文本），因此这些div中可能存在多个节点。 为了更正确地理解问题，这里是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>