window.getSelection() for contenteditable div *on click*

Question

I have a contenteditable div and want to get the user's selection when they click a span.

My problem is that when I click the span, the selection gets unselected so window.getSelection().toString() returns ''.

How can I get this to work on click of a span?

I know the actual getSelection() works, because if I wrap window.getSelection().toString() in a setTimeout of 5 seconds, after 5 seconds, I get the selected text!

My code:

$('#btn').click(function() {
  console.log(window.getSelection().toString()); //returns ''
});

#btn {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id='btn'>get selection</span>
<br><br>
<div id='ce' contenteditable='true'>test</div>

Answer 1

You can store the selection when there is a click on your contenteditable div, then return it when you click on the button.

document.querySelector("#ce").addEventListener(function(){
  userSelection= window.getSelection().toString();
});


document.querySelector("#btn").addEventListener("mouseup",function(){

  document.querySelector("#selection").innerHTML= 
    "You have selected:<br/><span class='selection'>" +  userSelection +"</span>";

});

http://jsfiddle.net/xnvp38u3/