Форум

skillful · #1 (**permalink**) 13.10.2014, 16:30

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

<!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>

danik.js · #2 (**permalink**) 13.10.2014, 16:46

<!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>

Форум

Справочник

Discord чат

Курсы javascript