jquery color picker with execCommand call

Question

Trying to call execCommand after color selection:

$('#picker').colorPicker(
    {           
      defaultColor:0, // index of the default color
      columns:13,     // number of columns 
      click:function(c){
             document.execCommand('ForeColor',false, c);    
      }
});

but nothing happens. If i replace execCommand with $('#output').html(c) i see that call is successful.

example: http://jsfiddle.net/YQQXV/12/

ColorPicker plugin page

score 2 · Accepted Answer · edited May 23 '17 at 10:24

2

I played a bit with you fiddle, incorporating an answer from here.

A more working example of your fiddle is here.

It seems to me as if you forgot the designMode setting.

edited May 23 '17 at 10:24

Community

1
1

answered Aug 13 '12 at 19:55

Florian

3,366
1
29
35

Hmm.. your example a little bit more complicated :) but anyway in your example entire string changes the color, i need to change color for selected part of the text only. i'm not sure that designMode should be specified because contentEditable is used. – user947668 Aug 13 '12 at 20:14
1

mmh, i don't want to bombard you with more complicated JavaScript, but i can give you an example: http://help.dottoro.com/external/examples/ljcvtcaw/execCommand_4.htm - you can transfer the `ColorizeSelection` from the example to you you click-Handler. – Florian Aug 13 '12 at 20:33
Hi buddies, [look at my fiddle, it's also not perfect, but partially works.](http://jsfiddle.net/A8mfR/1/) If you examine the page in Firefox HTML Inspector (Ctrl+Shift+I), browser adds font tag internally. It's based on these two links: [Rich-Text Editing in Mozilla](https://developer.mozilla.org/en-US/docs/Rich-Text_Editing_in_Mozilla) and [Preserve text selection in contenteditable while interacting with jQuery UI Dialog and text input at SO](http://stackoverflow.com/questions/3315824/preserve-text-selection-in-contenteditable-while-interacting-with-jquery-ui-dial). – Stano Aug 13 '12 at 20:50
Florian, thanks for this example. probably i'll use it as workaround in case of execCommand ForeColor solution will not be found. – user947668 Aug 13 '12 at 20:50
Stano, nothing changes in my Firefox 12. – user947668 Aug 13 '12 at 20:56
2

Oh yeah, i figured out why it doesn't work with mouse. I call the saveSelection() method on keyup event, so you need to select with keyboard instead of mouse. But you can handle this also with the onmouseup event similarly :) – Stano Aug 13 '12 at 21:00
i see. it works and also can be used as workaround. but i want to clarify why my code doesn't work. – user947668 Aug 13 '12 at 21:02
@user947668 [Your latest code preserves text selection and so it works:](http://jsfiddle.net/YQQXV/15/) Look, if you click on the color picker, the selection is lost, but as shown in [this example](https://developer.mozilla.org/en-US/docs/Rich-Text_Editing_in_Mozilla) it uses the ` – Stano Aug 13 '12 at 21:54
you are right, browser loses selection after click on color picker. that was a problem. thank you very much for last fiddle, this is exactly what i need. – user947668 Aug 14 '12 at 20:15

score 1 · Answer 2 · answered Aug 13 '12 at 19:48

1

According to MS Docs you need to pass a command ID as the first argument to execCommand. Where is your ForeColor pointing to?

$('#output').html(c)

directly changes the inner HTML of the div with ID output, that's why it works.

answered Aug 13 '12 at 19:48

Hazem Salama

14,891
5
27
31

ForeColor pointing to selected text. I've added a button to show execCommand successful execution http://jsfiddle.net/YQQXV/12/ – user947668 Aug 13 '12 at 19:54
ForeColor is in the command identifiers list: http://msdn.microsoft.com/en-us/library/ms533049(v=vs.85).aspx – user947668 Aug 13 '12 at 20:01

jquery color picker with execCommand call

2 Answers2