Question

如何让execCommand使用span和style属性以富文本样式代替字体标签和color属性？这是我需要的简单示例。
使用execCommand输出：var keys = Object.keys(service_load_combo); var maxKey= (service_load_combo[keys[0]] > service_load_combo[keys[1]] ? keys[0] : keys[1]); console.log(`Max: Key: ${maxKey}`);。
输出：<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;
}

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（ES5）或NodeList上相对较新的NodeList是可迭代的（ES2015 +）。如有必要，请参见this answer中有关填充的注意事项。

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

3 个答案: