HTML5 div contenteditable - 通过选择查看文本颜色答案

【问题标题】：HTML5 div contenteditable - see text color through the selectionHTML5 div contenteditable - 通过选择查看文本颜色
【发布时间】：2014-01-22 01:19:50
【问题描述】：

我有一个可内容编辑的 div，效果很好！我唯一的问题是我在选择中看不到任何文本颜色，无论是红色还是黑色，它都是白色和蓝色。

我知道您可以使用 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() 更改选择的颜色，您将不会通知不同的颜色，因为您不会通过选择看到新颜色...您只会在模糊时看到它

【问题讨论】：

jsfiddle.net/c6h4e 这是你需要的小提琴吗？

标签： html selection contenteditable execcommand

【解决方案1】：

我真的没那么远！

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

如果您没有为文本颜色指定 css color 属性，您将只有蓝色背景，而文本保持分配的颜色（正如我正在寻找的那样！）。您必须将类 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>

【讨论】：