shikhalev/body.css

## body.css
body {
  position : absolute;
  top : 0px;
  bottom : 0px;
  left : 0px;
  right : 0px;
  padding : 0px;
  margin : 0px;
}

## selection.css

body {
  position : absolute;
  top : 0px;
  bottom : 0px;
  left : 0px;
  right : 0px;
  padding : 0px;
  margin : 0px;
}

#toolbar {
  position : absolute;
  left : 0px;
  right : 0px;
  top : 0px;
  height : 32px;
  background-color : silver;
}

#main {
  position : absolute;
  left : 20%;
  right : 20%;
  top : 32px;
  bottom : 64px;
}

## selection.html
<!DOCTYPE html>

<html>

<head>
  <meta charset="UTF-8">
  <title>Selection demo</title>

  <link rel="stylesheet" href="selection.css">
  <script src="selection.js"></script>

</head>

<body>

<div id="toolbar"></div>

<div id="main" contenteditable>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elit metus,
pulvinar vitae faucibus eget, imperdiet eu metus. Pellentesque hendrerit tortor
dolor, at posuere urna sodales et. Vivamus rutrum nulla ultricies sodales
posuere. Fusce tempus vitae magna quis mollis. Donec vehicula eget massa a
posuere. Suspendisse tincidunt, eros eu condimentum rutrum, nunc leo tristique
eros, et lacinia justo massa sed lacus. Sed dignissim lacinia lacinia. Nulla sed
lobortis odio. Etiam vel eros cursus, suscipit felis in, ultricies turpis. Proin
feugiat blandit neque eget varius. Sed vel libero lorem. Vestibulum viverra
purus eros. Nullam adipiscing magna eu libero pharetra, suscipit pellentesque
augue condimentum.</p>

<p>Etiam dapibus nisl non odio congue mollis. Nulla ut molestie massa. Integer
sodales porta sapien et posuere. Suspendisse nec pretium lacus. Etiam quis neque
vel sapien venenatis pretium tincidunt ut lacus. Ut id pulvinar orci. Etiam
bibendum pharetra erat. Pellentesque at eros lacus.</p>

<p>Nam convallis luctus ligula. Sed ac lacus tempor, feugiat mi at, consectetur
felis. Nulla laoreet, massa non fringilla congue, libero felis mollis nulla, id
dignissim velit tellus sit amet massa. Maecenas ante dui, tincidunt vitae metus
in, gravida eleifend purus. Sed eget mi vel odio bibendum aliquam vel sit amet
dui. Ut nisi nisl, aliquet ut molestie suscipit, dignissim vitae erat. Phasellus
gravida rutrum consequat.</p>
</div>

</body>

</html>

## selection.js
var saved = null;

function storeSelection(e) {
  var main = document.getElementById('main');
  var current = e.target;
  var compare = main.compareDocumentPosition(current);
  if (compare != 0 && (compare & 16) == 0) {
    var range = window.getSelection().getRangeAt(0);
    saved = {
      startContainer : range.startContainer,
      startOffset : range.startOffset,
      endContainer : range.endContainer,
      endOffset : range.endOffset
    };
  }
}

function restoreSelection(e) {
  var main = document.getElementById('main');
  var current = e.target;
  var compare = main.compareDocumentPosition(current);
  if (saved && compare != 0 && (compare & 16) == 0) {
    var range = document.createRange();
    range.setStart(saved.startContainer, saved.startOffset);
    range.setEnd(saved.endContainer, saved.endOffset);
    var selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);
  }
}

window.addEventListener('load', function(e) {
  var body = document.body;
  body.addEventListener('mousedown', storeSelection, false);
  body.addEventListener('mouseup', restoreSelection, false);
}, false);
	body {
	position : absolute;
	top : 0px;
	bottom : 0px;
	left : 0px;
	right : 0px;
	padding : 0px;
	margin : 0px;
	}
	<!DOCTYPE html>

	<html>

	<head>
	<meta charset="UTF-8">
	<title>Selection demo</title>

	<link rel="stylesheet" href="selection.css">
	<script src="selection.js"></script>

	</head>

	<body>

	<div id="toolbar"></div>

	<div id="main" contenteditable>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elit metus,
	pulvinar vitae faucibus eget, imperdiet eu metus. Pellentesque hendrerit tortor
	dolor, at posuere urna sodales et. Vivamus rutrum nulla ultricies sodales
	posuere. Fusce tempus vitae magna quis mollis. Donec vehicula eget massa a
	posuere. Suspendisse tincidunt, eros eu condimentum rutrum, nunc leo tristique
	eros, et lacinia justo massa sed lacus. Sed dignissim lacinia lacinia. Nulla sed
	lobortis odio. Etiam vel eros cursus, suscipit felis in, ultricies turpis. Proin
	feugiat blandit neque eget varius. Sed vel libero lorem. Vestibulum viverra
	purus eros. Nullam adipiscing magna eu libero pharetra, suscipit pellentesque
	augue condimentum.</p>

	<p>Etiam dapibus nisl non odio congue mollis. Nulla ut molestie massa. Integer
	sodales porta sapien et posuere. Suspendisse nec pretium lacus. Etiam quis neque
	vel sapien venenatis pretium tincidunt ut lacus. Ut id pulvinar orci. Etiam
	bibendum pharetra erat. Pellentesque at eros lacus.</p>

	<p>Nam convallis luctus ligula. Sed ac lacus tempor, feugiat mi at, consectetur
	felis. Nulla laoreet, massa non fringilla congue, libero felis mollis nulla, id
	dignissim velit tellus sit amet massa. Maecenas ante dui, tincidunt vitae metus
	in, gravida eleifend purus. Sed eget mi vel odio bibendum aliquam vel sit amet
	dui. Ut nisi nisl, aliquet ut molestie suscipit, dignissim vitae erat. Phasellus
	gravida rutrum consequat.</p>
	</div>

	</body>

	</html>
	var saved = null;

	function storeSelection(e) {
	var main = document.getElementById('main');
	var current = e.target;
	var compare = main.compareDocumentPosition(current);
	if (compare != 0 && (compare & 16) == 0) {
	var range = window.getSelection().getRangeAt(0);
	saved = {
	startContainer : range.startContainer,
	startOffset : range.startOffset,
	endContainer : range.endContainer,
	endOffset : range.endOffset
	};
	}
	}

	function restoreSelection(e) {
	var main = document.getElementById('main');
	var current = e.target;
	var compare = main.compareDocumentPosition(current);
	if (saved && compare != 0 && (compare & 16) == 0) {
	var range = document.createRange();
	range.setStart(saved.startContainer, saved.startOffset);
	range.setEnd(saved.endContainer, saved.endOffset);
	var selection = window.getSelection();
	selection.removeAllRanges();
	selection.addRange(range);
	}
	}

	window.addEventListener('load', function(e) {
	var body = document.body;
	body.addEventListener('mousedown', storeSelection, false);
	body.addEventListener('mouseup', restoreSelection, false);
	}, false);