Einfügen von Text an dem Punkt Cursor - Einfügen von zur Zeit in das geklickt Element nicht Textfeld

Question

diese Funktion gefunden:

function insertTextAtCursor(text) { 
    var sel, range, html; 
    sel = window.getSelection(); 
    range = sel.getRangeAt(0); 
    range.deleteContents(); 
    var textNode = document.createTextNode(text); 
    range.insertNode(textNode); 
    range.setStartAfter(textNode); 
    sel.removeAllRanges(); 
    sel.addRange(range); 
} 

Ich habe einen Inhalt editierbare div und eine Schaltfläche einrichten einen Image-Tag in den div hinzuzufügen.

Allerdings fügt die Schaltfläche den Text nach sich selbst hinzu und nicht das div.

Irgendwelche Hilfe?

https://jsfiddle.net/e859j9an/

Answer 1

EDIT: Ich finde einen Weg, es zu tun, wenn Sie in der contenteditable div klicken:

See this fiddle

ich Ihre JS mit diesem Code aktualisiert haben:

$(function() { 
    /* Text editor */ 
    $(".custom-text-editor").on('click', function(){ 
    insertTextAtCursor('this text'); 
    }); 
}); 

function insertTextAtCursor(text) { 
    var sel, range, html; 
    if (window.getSelection) { 
     sel = window.getSelection(); 
     if (sel.getRangeAt && sel.rangeCount) { 
      range = sel.getRangeAt(0); 
      range.deleteContents(); 
      range.insertNode(document.createTextNode(text)); 
     } 
    } else if (document.selection && document.selection.createRange) { 
     document.selection.createRange().text = text; 
    } 
} 

Ich weiß nicht, ob Sie die richtige Position im div.custom-text-editor erhalten, wenn Sie auf die Schaltfläche klicken ..

Answer 2

es ist, weil, wenn Sie auf ein anderes Element klicken, verliert der contenteditable div seinen Fokus.

ändern Sie Ihren Code so.

$(".custom-text-editor").focus(); 
$(".insert-image").on('mousedown', function(e){ 
insertTextAtCursor("this is an image"); 
return false; 
});