Сделал вот такой маленький пример:
var div = document.querySelector('div');
var button = document.querySelector('button');
button.addEventListener('click', changeFontColor);
function changeFontColor() {
document.execCommand('foreColor', false, "green");
}
div.addEventListener('keydown', setDefaultFontColor);
function setDefaultFontColor() {
document.execCommand('foreColor', false, "red");
}
div {
font-size: 2rem;
color: red;
font-family: sans-serif;
}
<div contenteditable="true">Lorem, ipsum dolor</div>
<button>CLICK</button>
Так как тема для меня новая, мне совсем непонятно, это удачный пример или нет (сомнения с событием keydown
)?
Ещё заметил, что если в setDefaultFontColor
цвет меняется на такой же, как и в css, то новый текст не оборачивается в тег <font></font>
... что мне собственно и нужно, но непонятно почему...это какие-то оптимизации со стороны браузера?
Потом стало интересно, как это сделать "вручную", написал вот такое:
var div = document.querySelector('div');
var button = document.querySelector('button');
button.addEventListener('click', changeText);
function changeText() {
var selected = window.getSelection().toString();
var currentText = div.innerHTML;
currentText = currentText.replace(new RegExp(selected, 'g'), `<span>${selected}</span>`);
div.innerHTML = currentText;
}
div {
font-size: 2rem;
color: red;
font-family: sans-serif;
}
span {
color: green;
}
<div contenteditable="true">Lorem, ipsum dolor</div>
<button>CLICK</button>
но теперь новая проблема: как "выйти" из тега span
после изменения цвета и продолжить писать в div
?