How can I get the caret position on a contenteditable <button>

So I have a contenteditable button in my webpage I declare like so:

<button id="test" contentEditable="true">This <img src="image..png" /> is a button, click me!</button>

I move the caret around, and I want to find its final location. I tried both:

• window.getSelection().focusOffset.toString()
• document.getElementById('test').selectionStart.toString()";

but neither of them seems to work :( A开发者_运维技巧ny pointers?

---

Update

Unfortunately the code from the links below seems to work only with Firefox and not with Chrome (for a button, divs work just fine)

---

Take a look at these:

• Get caret position in contentEditable div
• https://niichavo.wordpress.com/2009/01/06/contenteditable-div-cursor-position/

Here's a quick and dirty fiddle - it isn't perfect but it might help you get started. I've used code from the blog post at the second link above.