Получите последнюю позицию каретки среди нескольких contenteditable div и добавьте изображение в div, где последний раз присутствовал курсор - PullRequest
Новая
       33

Получите последнюю позицию каретки среди нескольких contenteditable div и добавьте изображение в div, где последний раз присутствовал курсор

0 голосов
/ 27 октября 2018

Мне нужно добавить изображение к нескольким контент-редактируемым разделам, основываясь на факте, который был отредактирован совсем недавно.Кроме того, 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>

1 Ответ

0 голосов
/ 27 октября 2018

Вы можете получить последний раз 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>
...