Как сделать чтоб bold работал только на одной строчке в contenteditable
Я делаю простенький редактор текста с помощью div с contenteditable и js. Возникла такая проблема, если одни раз выполнить эту команду:
document.execCommand('bold', false, string);
То она применяется ко всему тексту, а хотелось бы сделать чтоб она применялась только к одной строке.
var redactor = document.getElementById('window-redactor');
var tools = document.getElementById('tools');
document.execCommand('defaultParagraphSeparator', false, 'p');
document.onmouseup = function(e) {
var s = '';
if (window.getSelection) {
if (window.getSelection().toString()) {
s = window.getSelection().toString();
}
} else if (window.selection && document.selection.type != 'Control') {
if (document.selection.createRange().text) {
s = document.selection.createRange().text;
}
}
if (s != '') {
tools.style.bottom = e.clientY;
tools.style.left = e.clientX;
tools.style.display = 'block';
if (e.target.id == 'bold') {
redactor.focus();
document.execCommand('bold', false, s);
}
}
}
/* setting entry field */
#redactor {
margin-top: 20px;
padding: 10px;
width: 100%;
background: white;
outline: none;
font-size: 20px;
}
/* setting tools */
#tools {
position: absolute;
padding: 3px;
background: #0A0B0A;
border-radius: 10px;
}
#tools button {
width: 40px;
height: 40px;
background: #383838;
color: white;
font-weight: bolder;
font-size: 22px;
border-radius: 10px;
border: none;
}
#tools button:hover {
background: #282828;
cursor: pointer;
}
<link rel="stylesheet" href="/static/css/new_post.css">
<script src="/static/js/new_post.js"></script>
<div id="window-redactor">
<div id="redactor" contenteditable="true"></div>
</div>
<div id="tools" style="display: none;">
<button type="button" id="bold">B</button>
</div>