html contentEditable document.exec命令更改选定的不透明度

Question

任何人都选择了在contentEditable上更改不透明度。

我尝试了以下内容：

document.execCommand('foreColor', false, 'rgba(0,0,0,0.5)'); // with rgba
document.execCommand('foreColor', false, '80000000'); // with alpha hex

没有用。但我可以轻松改变颜色：

document.execCommand('foreColor', false, '000000');

任何人都可以通过document.execCommand帮助我改变不透明度吗？

更新

进一步搜索发现：

document.execCommand＆＃39; foreColor＆＃39;使用给定颜色添加字体标签。但遗憾的是HTML5中不支持color属性。

这就是问题所在？它的替代方案是什么？

Answer 1

您必须使用styleWithCSS命令，该命令指定execCommand方法是否应将CSS或HTML格式生成到文档中。

请参阅此处的规格：https://dvcs.w3.org/hg/editing/raw-file/tip/editing.html#the-stylewithcss-command。

因此，在这种情况下，传递true以使用CSS样式而不是生成font标记。

<强> 段：

function setColor() {
    document.execCommand('styleWithCSS', false, true);
    document.execCommand('foreColor', false, "rgba(0,0,0,0.5)");
}

<p contentEditable="true" onmouseup="setColor();">this is some text</p>

这将生成应用了CSS的HTML，如下所示：

<p contenteditable="true" onmouseup="setColor();">
    this is <span style="color: rgba(0, 0, 0, 0.498039);">some</span> text
</p>

希望有所帮助。