Mail.ruПочтаМой МирОдноклассникиВКонтактеИгрыЗнакомстваНовостиКалендарьОблакоЗаметкиВсе проекты

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

GorkiiOgurec Профи (824), на голосовании 1 год назад
Я делаю простенький редактор текста с помощью 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;
}
   






Голосование за лучший ответ
Professional Professional Мудрец (15769) 1 год назад
Чтобы сделать так, чтобы команда 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 === "P") {
parentNode.style.fontWeight = parentNode.style.fontWeight === "bold" ? "normal" : "bold";
} else {
const newBoldElement = document.createElement("p");
newBoldElement.style.fontWeight = "bold";
newBoldElement.innerHTML = selection;
range.deleteContents();
range.insertNode(newBoldElement);
}
}


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

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();
applyBoldToSelectedLine();
}
}
};

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

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


Это должно заставить ваш редактор текста применять стиль bold только к выделенной строке, а не ко всему тексту.
GorkiiOgurecПрофи (824) 1 год назад
Ваш способ работает также как document.execCommand('bold', false, str)
GorkiiOgurec, в чем смысл пользоваться устаревшими методами?
Похожие вопросы