html contentEditable document.execCommand cambia l'opacità selezionata

Question

chiunque abbia lavorato con la modifica dell'opacità su contentEditable selezionato.

ho provato con seguente:

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

nessuno ha funzionato. ma posso cambiare facilmente il colore con:

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

qualcuno mi può aiutare a modificare l'opacità con Document.ExecCommand?

Aggiornamento

Su ulteriori ricerche scoperto:

Document.ExecCommand 'forecolor' aggiungere tag font da selezionato con determinato colore. Purtroppo, l'attributo color di non è supportato in HTML5.

è questo il problema? qual è la sua alternativa?

Answer 1

È necessario utilizzare il comando styleWithCSS, che specifica se la formattazione CSS o HTML deve essere generata dal metodo execCommand nel documento.

Consultare le specifiche qui: https://dvcs.w3.org/hg/editing/raw-file/tip/editing.html#the-stylewithcss-command.

Quindi, in questo caso passare true per utilizzare lo stile CSS anziché generare il tag font.

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>

Questa HTML genererà con i CSS applicato, in questo modo:

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

Speranza che aiuta.

.