html contentEditable document.execCommand更改选定的不透明度 [英] html contentEditable document.execCommand change selected opacity

问题描述

我尝试了以下方法：

  document.execCommand（'foreColor'，false，'rgba（0,0,0,0.5）'）; //使用rgba 
 document.execCommand（'foreColor'，false，'80000000'）; //以字母十六进制
  

无效。但我可以很容易地改变颜色：

  document.execCommand（'foreColor'，false，'000000'）; 
  

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

更新

在进一步的搜索中发现： document.execCommand'foreColor'将字体标签添加到选定的颜色。但遗憾的是HTML5中不支持color属性。

是这个问题吗？它的替代方案是什么？

解决方案

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

请参阅此处的规范： https://dvcs.w3.org/hg/editing/raw-file/tip/editing.html#在这种情况下，通过 true 来使用CSS样式而不是生成字体标记。

摘录：

  function setColor（）{document.execCommand（'styleWithCSS'，false，true）; document.execCommand（'foreColor'，false，rgba（0,0,0,0.5））;}  

 < p contentEditable =trueonmouseup =setColor（）;>这是一些文字< / p>   
 
这将生成HTML应用CSS，如下所示：
 
 
  pre> < p contenteditable =trueonmouseup =setColor（）;> 
这是< span style =color：rgba（0，0，0，0.498039）;>一些< / span>文本
< / p> 
  

希望有帮助。

。

any one worked with changing opacity on contentEditable selected.

I tried with following:

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

none worked. but i can easily change colour with:

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

Can anyone help me on change opacity with document.execCommand ?

Update

On further searching found out:

document.execCommand 'foreColor' add font tag to selected with given colour. But sadly the color attribute of is not supported in HTML5.

is thats the problem ? what is its alternative ?

解决方案

You will have to use the styleWithCSS command, which specifies whether CSS or HTML formatting should be generated by the execCommand method into the document.

Refer the specs here: https://dvcs.w3.org/hg/editing/raw-file/tip/editing.html#the-stylewithcss-command .

So, in this case pass true to use the CSS styling instead of generating the font tag.

Snippet:

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>

This will generate HTML with CSS applied, like this:

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

Hope that helps.

.

这篇关于html contentEditable document.execCommand更改选定的不透明度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！