javascript - 如何单击内容可编辑 div，然后单击跨度保留焦点

Question

这是 fiddle 链接的代码 link

在此，我单击的跨度被附加到 div 中的内容，但我希望将其插入到光标的特定位置，而不是附加。

document.querySelector('.selectable-icons').addEventListener('click', function(e) {
 
    document.querySelector('[contenteditable]').appendChild(e.target.cloneNode(true));
  
});


document.querySelector('div').addEventListener('keydown', function(event) {
    // Check for a backspace
    if (event.which == 8) {
        s = window.getSelection();
        r = s.getRangeAt(0)
        el = r.startContainer.parentElement
        // Check if the current element is the .label
        if (el.classList.contains('label')) {
            // Check if we are exactly at the end of the .label element
            if (r.startOffset == r.endOffset && r.endOffset == el.textContent.length) {
                // prevent the default delete behavior
                event.preventDefault();
                if (el.classList.contains('highlight')) {
                    // remove the element
                    el.remove();
                } else {
                    el.classList.add('highlight');
                }
                return;
            }
        }
    }
    event.target.querySelectorAll('span.label.highlight').forEach(function(el) { el.classList.remove('highlight');})
});

[contenteditable] {
  border: 1px solid #000;
  margin: 0.4em 0;
  line-height: 1.4em;
  -webkit-appearance: textfield;
  appearance: textfield;
}
img {
  vertical-align: top;
  max-height: 1.4em;
  max-width: 1.4em;
}
.selectable-icons img {
  cursor: pointer;
}

span.label.highlight {
    background: #E1ECF4;
    border: 1px dotted #39739d;
}

<p>Just click on an icon to add it.</p>

<div class="custom-input">
  <div class="selectable-icons">
    <span class="label"> Ingredient1 </span> 
    <span class="label">INGREDIENT 2</span> 
      <span class="label">INGREDIENT 3</span>  
  </div>
  <div contenteditable="true">
    You can type here. Add an icon.
  </div>
</div>

我尝试了此 link 中建议的一个解决方案

在提供的链接中，有一个我使用 span 的按钮。当我点击跨度时

window.getSelection

通过 onClick 事件返回 span 元素。焦点转移到该跨度

Answer 1

为了能够在光标位置插入元素，您需要在焦点丢失之前保存当前位置。然后单击时，您需要在添加元素之前恢复该位置。我已经更新了你的 JSFiddle here

function saveSelection() {
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            return sel.getRangeAt(0);
        }
    } else if (document.selection && document.selection.createRange) {
        return document.selection.createRange();
    }
    return null;
}

function restoreSelection(range) {
    if (range) {
        if (window.getSelection) {
            sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);
        } else if (document.selection && range.select) {
            range.select();
        }
    }
}

function pasteHtmlAtCaret(html) {
    var sel, range;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.insertNode(html);
            restoreSelection(range);
        }
    } else if (document.selection && document.selection.type != "Control") {
        document.selection.createRange().pasteHTML(html);
    }

}

您可以在这里查看 the full paste html method

我希望这会有所帮助。