2014-12-12 14 views
5

Jeder, der mit wechselnder Deckkraft bei contentEditable ausgewählt wurde.html contentEditable document.execCommand ändert die ausgewählte Opazität

Ich habe versucht, mit folgenden:

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

keine gearbeitet. aber ich kann leicht Farbe mit ändern:

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

Kann jemand mir helfen, Änderung Opazität mit document.execCommand?

aktualisieren

Beim weiteren fand heraus, suche:

mit bestimmten Farbe

document.execCommand 'foreColor' add font-Tag ausgewählt. Leider wird das Farbattribut von HTML5 nicht unterstützt.

ist das das Problem? Was ist seine Alternative?

Antwort

7

Sie müssen den Befehl styleWithCSS verwenden, der angibt, ob CSS- oder HTML-Formatierung von der execCommand-Methode in das Dokument generiert werden soll.

Siehe die Spezifikationen hier: https://dvcs.w3.org/hg/editing/raw-file/tip/editing.html#the-stylewithcss-command.

In diesem Fall übergeben Sie true, um das CSS-Styling anstelle des Tags font zu verwenden.

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>

Dies wird mit CSS erzeugen HTML angewendet, wie folgt aus:

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

Hoffnung, das hilft.

.

+0

danke. das hat geholfen :-) – abduIntegral

+0

Awesome, vielen dank ... –

Verwandte Themen