html contentEditable document.execCommand 更改选定的不透明度

Question

任何人都曾在 contentEditable selected 上改变不透明度。

我尝试了以下内容:

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 'foreColor' 添加字体标签以选择给定的颜色。但遗憾的是 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>

希望对您有所帮助。

.