Использовать span вместо шрифта в execCommand

1

Как позволить 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>
Теги:
execcommand

1 ответ

1
Лучший ответ

К сожалению, я сомневаюсь, что вы можете; но вы можете легко исправить это после:

// 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+). См. Этот ответ для заметок по полифорированию по мере необходимости.

  • 0
    Спасибо, это было полезно.
  • 0
    Я нашел правильный способ сделать это, я хотел поделиться им с вами: <br> document.execCommand("styleWithCSS", true, null);
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню