Javascript-форум - Возврат каретки

Здравствуйте. Хочу для сайта написать небольшой визуальный редактор. Нашел такой вот код. Но каретка постоянно пропадает при нажатии на "Сделать жирным". Подскажите, что можно сделать, чтобы каретка оставалась там же где и была или возвращалась на место.

<!DOCTYPE html>
<html>
<head>
<script src='http://code.jquery.com/jquery-latest.js'></script>

<script type='text/javascript'>
$(document).ready(function()
{
    $( '.bold' ).on( 'click', function()
	{
		document.execCommand( 'bold', null, null ); 
	});
});
</script>
</head>
<body>
<a href="#" class="bold" id="" onclick="return false;">
  Сделать жирным текст
</a>
<br>	<br>			
<div contenteditable style="border: 1px solid #000; width: 100%;height:70px;"></div>
			
			
</body>
</html>
</html>

<!DOCTYPE html> <div> <div class="toolbar"> <button data-command="bold" title="Жирный жирный жирный. Как поезд пассажирный">Жирный</button> <div contenteditable="">Редактируемый текст</div> </div> <script> (function() { function onButtonClick() { document.execCommand(this.getAttribute('data-command'), null, null); } function cancelEvent() { return false; } var toolbarButtons = document.querySelectorAll('.toolbar button'); for (var i = 0; i < toolbarButtons.length; i++) { toolbarButtons[i].onclick = onButtonClick; toolbarButtons[i].onmousedown = cancelEvent; } })(); </script> </div>