挿入するテキスト - 現在クリックされた要素の中に挿入していないテキストフィールド

Question

この機能が見つかり：

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); 
} 

を私はコンテンツの編集可能なdiv要素とdivのにイメージタグを追加するように設定ボタンがあります。

ただし、フィドルごとに、ボタンはdivにではなくテキストを自分自身に追加します。

助けが必要ですか？

https://jsfiddle.net/e859j9an/

Answer 1

EDIT：あなたはのcontentEditable divでクリックしたとき、私はそれを行うための方法を見つける：

See this fiddle私はこのコードを使用してJSを更新した

：

$(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; 
    } 
} 

ボタンをクリックしたときにdiv.custom-text-editorで正しい位置を取得できるかどうかはわかりません..

Answer 2

これは、別の要素をクリックすると、contenteditable divがフォーカスを失うからです。

このようにコードを変更してください。

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