Html contentEditable document.execCommand change selected opacity

Question

someone worked with changing the opacity on the selected contentEditable element.

I tried the following:

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

nobody worked. but I can easily change the color with:

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

Can someone help me in changing the opacity using document.execCommand?

Update

A further search revealed:

document.execCommand 'foreColor' add a font tag to the selected one with the specified color. But unfortunately, the color attribute is not supported in HTML5.

This is problem? What is its alternative?

Answer 1

You will need to use the styleWithCSS command, which indicates whether CSS or HTML formatting will be generated by the document method in the document.

Refer to the following specifications: https://dvcs.w3.org/hg/editing/raw-file/tip/editing.html#the-stylewithcss-command .

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

Excerpt:

 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 produce HTML using CSS, for example:

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

Hope this helps.

.