CONTENTEDITABLE文本編輯器，光標位置

Question

我如何（使用jQuery或其他）在我CONTENTEDITABLE div的光標/插入符號位置插入HTML：

<div contenteditable="true">Hello world</div> 

例如，如果光標/插入符號是之間的「hello 「和」世界「，然後用戶點擊一個按鈕，例如」插入圖片「，然後使用javascript，在」你好「和」世界「之間插入類似<img src=etc etc>的東西。我希望我已經明確了這一點= S

示例代碼將不勝感激，非常感謝！

Answer 1

我會建議使用jQuery插件的a-tools

這個插件有七大功能：

* getSelection – return start, end position, length of the selected text and the selected text. return start=end=caret position if text is not selected; 
* replaceSelection – replace selected text with a given string; 
* setSelection – select text in a given range (startPosition and endPosition); 
* countCharacters – count amount of all characters; 
* insertAtCaretPos – insert text at current caret position; 
* setCaretPos – set cursor at caret position (1 = beginning, -1 = end); 
* setMaxLength – set maximum length of input field. Also provides callback function if limit is reached. Note: The function has to have a number as input. Positive value for setting of limit and negative number for removing of limit. 

你需要的是insertAtCaretPos的一個：

$("#textarea").insertAtCaretPos("<img src=etc etc>"); 

有可能是一個退步：這個插件僅適用於textarea en輸入：文本元素，因此可能存在衝突h contenteditable。

Answer 2

下列功能就會插入光標所在位置的DOM節點（元素或文本節點）中的所有主流桌面瀏覽器：

function insertNodeAtCursor(node) { 
    var sel, range, html; 
    if (window.getSelection) { 
     sel = window.getSelection(); 
     if (sel.getRangeAt && sel.rangeCount) { 
      sel.getRangeAt(0).insertNode(node); 
     } 
    } else if (document.selection && document.selection.createRange) { 
     range = document.selection.createRange(); 
     html = (node.nodeType == 3) ? node.data : node.outerHTML; 
     range.pasteHTML(html); 
    } 
} 

如果你寧願將一個HTML字符串：

function insertHtmlAtCursor(html) { 
    var sel, range, node; 
    if (window.getSelection) { 
     sel = window.getSelection(); 
     if (sel.getRangeAt && sel.rangeCount) { 
      range = window.getSelection().getRangeAt(0); 
      node = range.createContextualFragment(html); 
      range.insertNode(node); 
     } 
    } else if (document.selection && document.selection.createRange) { 
     document.selection.createRange().pasteHTML(html); 
    } 
} 

我已經適應了這個從我的回答類似的問題：How to find cursor position in a contenteditable DIV?

Answer 3

隨着contenteditable你應該使用execCommand 。

嘗試document.execCommand('insertImage', false, 'image.jpg')或document.execCommand('insertHTML', false, '<img src="image.jpg" alt="" />')。第二個在舊版IE中不起作用。