Editable text editor and cursor position

Question

How can I (using jquery or another) insert html at the cursor / caret position of my contenteditable div:

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

For example, if the cursor / caret was between “hello” and “world”, and then the user clicked a button, for example, “insert image”, and then using javascript something like <img src=etc etc> will be inserted between “hello” and "world". Hope I made it clear = S

Sample code will be very grateful, thank you very much!

Answer 1

The following function will insert a DOM node (element or node text) at the cursor position in all major desktop browsers:

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

If you prefer to embed an HTML string:

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

I adapted this from my answer to a similar question: How to find the cursor position in the content DIV?

Answer 2

With contenteditable you should use execCommand .

Try document.execCommand('insertImage', false, 'image.jpg') or document.execCommand('insertHTML', false, '<img src="image.jpg" alt="" />') . The second does not work in older IE.

Answer 3

I would recommend using the jquery a-tools plugin

This plugin has seven functions:

 * 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. 

The one you need is insertAtCaretPos :

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

There may be a downside: these plugins only work with a text input element: text elements, so there may be conflicts with contenteditable.