HTML5 div contenteditable - 通過選擇查看文本顏色

Question

我有一個div contenteditable，它的工作很棒！我唯一的問題是，我看不到選擇中的任何文本顏色，無論它們是紅色還是其他黑色，都是白色和藍色。

我知道，你可以自定義您的選擇與CSS：

<style> 
    .customSelect::selection  { color: #F00; background: #333; } 
    .customSelect::-moz-selection { color: #F00; background: #333; } 
</style> 

而且我有一個非常有用的功能改變我選擇的CSS：

<script type="text/javascript"> 

    function editCSS(css){ 
    document.execCommand('insertHTML', false, '<span style="'+css+'">' + 
    document.getSelection()+'</span>'); 
    } 

</script> 

的事情是，如果你使用editCSS（）更改選擇的顏色，則不會通知其他顏色，因爲您沒有通過選擇看到新的顏色...您將會看到它只有onblur

Answer 1

我是r至少不是那麼遠！

<style> 
    .customSelect::selection  { background: rgba(175,210,255,0.5); } 
    .customSelect::-moz-selection { background: rgba(175,210,255,0.5); } 
</style> 

如果不指定文本顏色的CSS顏色屬性，你只會有一個藍色的背景和文本保持分配的顏色（如我一直在尋找的！）。您必須將類customSelect放入div contenteditable並放入editCSS（）函數中。

<script type="text/javascript"> 

    function editCSS(css){ 
    document.execCommand('insertHTML', false, '<span class="customSelect" ' + 
    'style="'+css+'">'+document.getSelection()+'</span>'); 
    } 

</script> 

HTML代碼

<div class="customSelect" contenteditable>some text</div>