set caret position in contenteditable div

[runrunforest]

I have a contenteditable div, it has some paragraphs in it.

Assuming a situation, when I click the button "set caret position", the main div will focus, the caret will start at position number 8 of second paragraph, which means the caret will appear after the word "draw".

How would you do it?

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function(){
//code
});
</script>
<div id="main" contenteditable="true" style="border:solid 1px black">
    <div>Said Hamlet to Ophelia,</div>
    <div>I'll draw a sketch of thee,</div>
    <div>What kind of pencil shall I use?</div>
    <div>2B or not 2B?</div>
</div>
<button>Set caret position</button>