Wie Klicken Sie auf Inhalt editierbare div dann klicken Sie auf Spanne beibehalten Fokus

Question

Dies ist der Code für die Geige Link link

dies in der Spanne auf den Inhalt in den div angefügt ich auf, aber ich will, dass anstelle von Anhängen fügt es an der bestimmten Stelle des Cursors ein.

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>

habe ich versucht, die eine Lösung in diesem im angegebenen Link

link schlug ich Spanne stattdessen verwendet eine Taste gibt. Wenn ich auf die Spanne klicke, gibt das

das span-Element mit onClick-Ereignis zurück. Der Fokus verschiebt sich auf diesen Bereich

Answer 1

Um Ihr Element an der Cursorposition einfügen zu können, müssen Sie die aktuelle Position speichern, bevor der Fokus verloren geht. und dann klicken Sie auf klicken Sie müssen diese Position wiederherstellen, bevor Sie das Element hinzufügen. Ich habe Ihre JSFiddle aktualisiert 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); 
    } 

} 

Sie können einen Blick hier haben für the full paste html method

Ich hoffe, das hilft.