Отбросить текст в позиции курсора в редактируемом контенте div

avatar
Lore
9 августа 2021 в 06:37
124
0
1

Я пытаюсь поместить любой HTML-код (с любой исходной страницы) в редактируемый контент div, конвертируя его в обычный текст, однако я не могу вставить результирующий текст в позицию каретки.

Я пытался использовать метод window.getSelection(), но он не возвращает положение курсора.

Вот где я застрял:

drop = function(e) {

  e.preventDefault();

  var data = e.dataTransfer.getData("text");
  var textnode = document.createTextNode(data);
  
  e.target.appendChild(textnode); // I want this to be inserted at caret position
  e.target.normalize();

  return false;

}
 div {border: 1px solid #000;padding: 10px;}
<h3>Source</h3>
<div contenteditable>
  <span style="color:#3366bb">Dummy <b>formatted</b> text</span>
</div>

<h3>Target div</h3>
<div contenteditable ondrop="drop(event)">
  Drag and drop any formatted text in the middle of <i>this</i> paragraph
</div>

Мы будем признательны за любую помощь, спасибо.

Источник
Alireza Ahmadi
9 августа 2021 в 07:21
0

Видеть это. Это очень близко к вашей проблеме: jsfiddle.net/jkLhfzr8

Lore
9 августа 2021 в 07:36
0

Спасибо, Алиреза, я видел это, но оно основано на исходном элементе, поэтому в моем случае это не сработает.

Ответы (0)