Get and set cursor position with contenteditable div

Question

I have a contenteditable div which I would like to be able to have users insert things such as links, images or YouTube videos. At the moment this is what I have:

function addLink() {    var link = $('#url').val();    $('#editor').focus();    document.execCommand('createLink', false, link);  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <!-- Text Editor -->  <div id="editor" contenteditable="true"></div>    <!-- Add Link -->  <input type="text" id="url">  <button onclick="addLink()">Submit</button>

As you can see, the user has to type into a separate text box to enter the link address. As a result, when the link is added to the editor, it is not added to the position that the pointer/caret was on.

My question is how I can get and set the location of the pointer/caret. I have seen other questions such as this for setting the pointer however I would prefer to have a solution which is supported in all modern browsers, including Chrome, Safari, Firefox and IE9+.

Any ideas? Thanks.

Edit:

I found the code below which gets the position however, it only gets the position according to the line it is on. For example if I had this (where | is the cursor):

This is some text And som|e more text 

Then I would be returned the value 7, not 24.

function getPosition() {     if (window.getSelection) {         sel = window.getSelection();         if (sel.getRangeAt) {             return sel.getRangeAt(0).startOffset;         }     }     return null; } 

Answer 1

There's a ton of related info onsite. This one works for me and my clients.

DEMO

https://stackoverflow.com/a/6249440/2813224

function setCaret(line, col) {   var ele = document.getElementById("editable");   var rng = document.createRange();   var sel = window.getSelection();   rng.setStart(ele.childNodes[line], col);   rng.collapse(true);   sel.removeAllRanges();   sel.addRange(rng);   ele.focus(); }  //https://stackoverflow.com/a/6249440/2813224  var line = document.getElementById('ln').value; var col = document.getElementById('cl').value; var btn = document.getElementById('btn'); btn.addEventListener('click', function(event) {   var lineSet = parseInt(line, 10);   var colSet = parseInt(col, 10);   setCaret(lineSet, colSet); }, true);

<div id="editable" contenteditable="true">   <br/>text text text text text text   <br/>text text text text text text   <br/>text text text text text text   <br/>   <br/> </div> <fieldset>   <button id="btn">focus</button>   <input type="button" class="fontStyle" onclick="document.execCommand('italic',false,null);" value="I" title="Italicize Highlighted Text">   <input type="button" class="fontStyle" onclick="document.execCommand('bold',false,null);" value="B" title="Bold Highlighted Text">   <input id="ln" placeholder="Line#" />   <input id="cl" placeholder="Column#" /> </fieldset>