Color Picker for CSS Hex codes

[Brandon Wamboldt]

Hello,

I have a quick question. I'm trying to add in the ability so that if a
user clicks on a hexadecimal color code in the CSS editing mode it
brings up a color picker for them.

I got all of this working, and they can pick a color and the color
appears. But if they type or scroll the color is reset, because I am
only adding the color to the DOM not the actually code.

Anyone have any ideas if there is a good way for me to add this in
properly? I'm sure there is a function I just can't find.

[Joe Cheng [RStudio]]

Do you want to show the snippet of code you're using now to do the insertion? That might make it easier to give you concrete advice.

--
You received this message because you are subscribed to the Google Groups "Ajax.org Cloud9 Editor (Ace)" group.
To post to this group, send email to ace-d...@googlegroups.com.
To unsubscribe from this group, send email to ace-discuss...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/ace-discuss?hl=en.

[Brandon Wamboldt]

I actually got it working, so for anybody interested:

    $('.ace_css_color').live('click', function() {
        var element = $(this);
       
        $('.ace_css_color').ColorPicker({
            eventName : 'focus',
            onChange : function(hsb, hex, rgb) {
                $c.editor.instance.selection.selectWord();
                $c.editor.instance.insert(hex);
            },
            onShow : function(colpkr) {
                var color = $(this).text().replace('#','');
                $c.util.colorpickerelem = $(this);
               
                if ( color.length == 3 ) {
                    color += color;
                }
               
                $(this).ColorPickerSetColor('#' + color);
            }
        });
       
        $(this).trigger('focus');
    });

ace_css_color is a class applied via syntax highlighting to CSS color codes.

--
Brandon Wamboldt
Programmer/Developer

My Blog - StackExchange Profile - LinkedIn