从CONTENTEDITABLE上点击使用CSS用户选择DIV失去选择的文本：无;(Losing s

我正在开发一个JavaScript富文本编辑器。 取而代之的按钮，我使用的是CSS属性的div user-select: none 。 这工作正常，在Firefox，但问题是谷歌浏览器 。

当我点击与CSS DIV user-select: none ，我失去了从CONTENTEDITABLE DIV选定的文本。 HTML和CSS在下面给出

<div id="editor">
   <div id="controls">
      <div id="button-bold"></div>
   </div>
   <div id="rte" contenteditable></div>
</div>

CSS

#button-bold
{
    width: 20px;
    height: 20px;
    padding: 2px;
    float: left;
    border: 1px solid #E7E7E5;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#rte {
    width: 100%;
    min-height: 400px;
    margin: 5px;
    outline: none;
}

Answer 1:

我有一个类似的设置，下面的解决方案在Chrome中正常工作： 如何使用jQuery禁用文本选择？

答案是增加一个处理程序“选择开始”事件。

Answer 2:

用按键的股利或跨度使得可点击链接以改变风格这一翻译。

然后使用document.execcommand（ '前景色'，假的， '＃000000'）;

文章来源: Losing selected text from contenteditable on clicking div with css user-select: none;