Как сделать чтоб bold работал только на одной строчке в contenteditable

Question

Я делаю простенький редактор текста с помощью 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;  
}

B

Professional Professional · Answer

Чтобы сделать так, чтобы команда bold работала только на одной строчке в элементе contenteditable, вам нужно определить, какая строка была выделена, и применить стиль bold только к этой строке. Вы можете сделать это, изменив ваш код следующим образом:

1. Замените document.execCommand('bold', false, s); на функцию, например: applyBoldToSelectedLine(); (добавьте ее после redactor.focus();)
2. Добавьте функцию applyBoldToSelectedLine:

function applyBoldToSelectedLine() {
  const selection = window.getSelection();
  const range = selection.getRangeAt(0);
  const parentNode = range.commonAncestorContainer.parentNode;

if (parentNode.nodeName === &#34;P&#34;) {
    parentNode.style.fontWeight = parentNode.style.fontWeight === &#34;bold&#34; ? &#34;normal&#34; : &#34;bold&#34;;
  } else {
    const newBoldElement = document.createElement(&#34;p&#34;);
    newBoldElement.style.fontWeight = &#34;bold&#34;;
    newBoldElement.innerHTML = selection;
    range.deleteContents();
    range.insertNode(newBoldElement);
  }
}

Итак, ваш итоговый JavaScript-код будет выглядеть так:

function applyBoldToSelectedLine() {
    const selection = window.getSelection();
    const range = selection.getRangeAt(0);
    const parentNode = range.commonAncestorContainer.parentNode;

if (parentNode.nodeName === &#34;P&#34;) {
        parentNode.style.fontWeight = parentNode.style.fontWeight === &#34;bold&#34; ? &#34;normal&#34; : &#34;bold&#34;;
    } else {
        const newBoldElement = document.createElement(&#34;p&#34;);
        newBoldElement.style.fontWeight = &#34;bold&#34;;
        newBoldElement.innerHTML = selection;
        range.deleteContents();
        range.insertNode(newBoldElement);
    }
}

Это должно заставить ваш редактор текста применять стиль bold только к выделенной строке, а не ко всему тексту.