Янковиц,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
div[contenteditable] > p{
border: 1px solid red;
min-height: 1em;
background-color: #FFFFFF;
margin: 4px 2px;
}
div[contenteditable]:focus {
outline: none;
}
div[contenteditable]{
background-color: #CCCCFF;
padding: 1px 4px;
}
div[contenteditable]:empty:before {
content:attr(placeholder);
color:gray
}
</style>
</head>
<body>
<div class="editor" contenteditable="true" placeholder="Кликните и начните писать..."></div>
<script>
const editor = document.querySelector('.editor');
editor.addEventListener( 'focus', function() {
if( editor.innerHTML == '' ) {
editor.innerHTML = '<p></p>';
editor.querySelector('p').focus()
}
} );
</script>
</body>
</html>