Как позволить execCommand использовать атрибут span и style для стилизации в расширенном тексте вместо тега шрифта и атрибута цвета? Это простой пример того, что мне нужно.
Вывод с использованием execCommand: <font color="#ff0000">Lorem ipsum</font>
.
Выход: <span style="color:#ff0000">Lorem ipsum</span>
.
function exec(a, b) {
document.execCommand(a, false, b);
console.log(document.getElementById('editor').innerHTML);
}
#editor {
box-shadow: 0 0 .3rem #aaa;
padding: .5rem 1rem;
margin: .5rem 0;
min-height: 3rem;
}
<select onchange="exec('forecolor',this.value); this.selectedIndex=0;">
<option class="heading" selected>- color -</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="black">Black</option>
</select>
<div contenteditable="true" id="editor">
Lorem ipsum
</div>
К сожалению, я сомневаюсь, что вы можете; но вы можете легко исправить это после:
// ES5 version
document.querySelectorAll("font").forEach(function(font) {
var span = document.createElement("span");
var color = font.getAttribute("color");
if (color) {
span.style.color = color;
}
while (font.firstChild) {
span.appendChild(font.firstChild);
}
font.parentNode.insertBefore(span, font);
font.parentNode.removeChild(font);
});
Пример с использованием функций ES2015+:
function exec(a, b) {
console.log(a, b);
document.execCommand(a, false, b);
for (const font of document.querySelectorAll("font")) {
const span = document.createElement("span");
const color = font.getAttribute("color");
if (color) {
span.style.color = color;
}
while (font.firstChild) {
span.appendChild(font.firstChild);
}
font.parentNode.insertBefore(span, font);
font.parentNode.removeChild(font);
}
console.log(document.getElementById("editor").innerHTML);
}
#editor {
box-shadow: 0 0 .3rem #aaa;
padding: .5rem 1rem;
margin: .5rem 0;
min-height: 3rem;
}
<select onchange="exec('forecolor',this.value); this.selectedIndex=0;">
<option class="heading" selected>- color -</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="black">Black</option>
</select>
<div contenteditable="true" id="editor">
Lorem ipsum
</div>
Вышеизложенное полагается на относительно новый forEach
на NodeList
(ES5) или NodeList
является итерируемым (ES2015+). См. Этот ответ для заметок по полифорированию по мере необходимости.
document.execCommand("styleWithCSS", true, null);