1

I'm developing a JavaScript rich text editor. Instead of buttons, I'm using div with css property user-select: none. This works fine in Firefox but problem is with Google Chrome.

When I click on div with css user-select: none, I'm losing the selected text from contenteditable div. Html and css is given below

<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;
}
Spudley
  • 166,037
  • 39
  • 233
  • 307
Ajeesh M
  • 2,092
  • 1
  • 14
  • 18
  • 1
    I have a similar setup, and the following solution works fine in Chrome: http://stackoverflow.com/questions/2700000/how-to-disable-text-selection-using-jquery – Yoshi Dec 14 '12 at 08:41
  • 1
    Thankyou, problem was with selectstart event. – Ajeesh M Dec 17 '12 at 11:36
  • No problem. I have put this as the answer below so you can close off this question. – Yoshi Dec 18 '12 at 23:07

2 Answers2

1

Use buttons, intead of div or span for making clickable links to change style.

And then use document.execcommand('forecolor',false,'#000000');

Dharmendra Jadon
  • 131
  • 1
  • 10
0

I have a similar setup, and the following solution works fine in Chrome: How to disable text selection using jQuery?

The answer is to add a handler for the 'selectstart' event.

Community
  • 1
  • 1
Yoshi
  • 3,325
  • 1
  • 19
  • 24