在 execCommand 中使用 span 而不是 font

Question

如何让 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>

Answer 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 on NodeList (ES5) 或 NodeList 可迭代 (ES2015+)。请参阅了解有关 polyfilling 的必要说明。

Answer 2

我找到了正确的方法，我想分享它。解决方案非常简单，只需使用 document.execCommand("styleWithCSS", true, null);

Answer 3

这是对我有用的方法

document.getElementById('color-picker').addEventListener('change',()=>{
    var colorP = document.getElementById('color-picker').value;
    document.designMode = 'on';
    document.execCommand('stylewithCSS',false,true)
    document.execCommand('foreColor',false,colorP);
    document.designMode = 'off';
});

在 execCommand 中使用 span 而不是 font

Use span instead of font in execCommand

javascript

execcommand