I guess you have to add a custom Tiny MCE plug-in. There seems to be one built into Tiny MCE 4 (http://www.tinymce.com/wiki.php/Plugin:textcolor) but I'm not sure how much work it is getting it to work in Tiny MCE 3.5 which is the current version used in EPiServer. Check the Tiny MCE developers guide on how to plug-in a Tiny MCE plug-in into EPiServer.

Yes, it's worth looking into if you want a color picker in Tiny MCE. I would like a color picker attached to a string property, somewhat like this:

// Start dummy code

[UIHint(UIHint.ColorPicker)]
public virtual string HeadingBackground { get; set; }

// End dummy code

Tiny MCE settings are stored using something called property settings. These can be defined either for a specific property or as a global setting that can be reused for some or all properties. There is currently no built in support to define property settings for a specific property through code. So you will have to create a Tiny MCE plug-in as described in the documentation and add that setting using the administrative interface (it's possible to automatically configure this in an initialization module. Here is an example of that).

Ok. The thing is I don't want the color picker inside the Tiny MCE Editor. I want it attached to a simple textbox so that when you set focus on the textbox a color picker shows up.

There's a Logica Color Picker 0.2.0.1 available on EPiServer NUGET, but for various reasons I want to avoid 3rd party solutions.

Thanks anyway for the information!

Can't you use a selection factory as described in http://world.episerver.com/Blogs/Linus-Ekstrom/Dates/2013/12/SingleMultiple-selection-in-EPiServer-75/ ?

You could use the dojox.widget.ColorPicker.

I probably could use the dojox.widget.ColorPicker, however wouldn't that require me to use a custom property? Or could I use UIHint or such? We're running EPiServer 7.0.

In general, you should be able to just define the widget directly, for instance by using the uihint/editordescriptor pattern or by defining the clienteditor attribute ([ClientEditor(ClientEditingClass = "dojox/widget/ColorPicker")]). For the ColorPicker however, is seems like it throws an exception if the value is null so you have to create a wrapping widget. See the StringList editor in the Alloy sample packages for an example (though you can probably simplify your widget quite a lot).

Linus, thanks,

I did the same.

But I have a small question with css file for dojox.widget.ColorPicker. I copied it to the project, but how to define usage of the standard css file from dojo library in the wrapping widget? 

The dojox-color picker seems very experimental and non-AMD. You can probably add the link to the template of your wrapping widget. There seems to be a somewhat simpler widget in the supported dijit namespace: http://livedocs.dojotoolkit.org/dijit/ColorPalette

Please, check (I used Alloy mvc as an example)

1. Use the UIHint or ClientEditor for property.

[ClientEditor(ClientEditingClass = "alloy.editors.ColorPicker")]

public virtual string ColorPicker { get; set; }

2. add to the project ClientResources\Scripts\Editors\ColorPicker.js

define([

    "dojo/_base/connect",

   "dojo/_base/declare",

    "dijit/_CssStateMixin",

    "dijit/_Widget",

    "dijit/_TemplatedMixin",

    "dijit/_WidgetsInTemplateMixin",

     "dojox/widget/ColorPicker",

    "epi/shell/widget/_ValueRequiredMixin"

],

function (

    connect,

    declare,

    _CssStateMixin,

    _Widget,

    _TemplatedMixin,

    _WidgetsInTemplateMixin,

     ColorPicker,

    _ValueRequiredMixin

 ) {

    return declare("alloy.editors.ColorPicker", [_Widget, _TemplatedMixin, _WidgetsInTemplateMixin, _CssStateMixin, _ValueRequiredMixin],

        {

            templateString: "<div class=\"dijitInline\"><div class=\"colorPickerContainer\">" +

                "<div data-dojo-attach-point=\"stateNode, tooltipNode\">" +

                "<div data-dojo-attach-point=\"colorPicker\" data-dojo-type=\"dojox.widget.ColorPicker\" >" +

                "</div></div></div></div>",

            intermediateChanges: false,

            value: null,

            onChange: function (value) {

                // summary:

                //    Called when the value in the widget changes.

                // tags:

                //    public callback

            },

            postCreate: function() {

                // summary:

                //    Set the value to the control after the DOM fragment is created.

                // tags:

                //    protected

                if (this.value != null) {

                    this.set("value", this.value);

                } else {

                    this._set("value", "#ffffff");

                    this.onChange(this.value);

                }

                // call base implementation

                this.inherited(arguments);

                // Init widget and bind event

                this.colorPicker.set("intermediateChanges", this.intermediateChanges);

                this.connect(this.colorPicker, "onChange", this._onColorPickerChanged);

            },

            _onIntermediateChange: function(event) {

                // summary:

                //    Handles the color picker key press events event and populates this to the onChange method.

                // tags:

                //    private

                if (this.intermediateChanges) {

                    this._set("value", event.target.value);

                    this.onChange(this.value);

                }

            },          

            focus: function () {

                // summary:

                //    Put focus on this widget.

                // tags:

                //    public

                dijit.focus(this.colorPicker);

            },

            isValid: function() {

                // summary:

                //    Check if widget's value is valid.

                // tags:

                //    protected, override

                return !this.required || this.colorPicker.value.length > 0;

            },

            _setValueAttr: function (value) {

                // summary:

                //    Sets the value of the widget to "value" and updates the value displayed in the textbox.

                // tags:

                //    private 

                if (value != null) {

                    this._set("value", value);

                    this.colorPicker.set("value", value);

                }

            }, 

            _setReadOnlyAttr: function(value) {

                this._set("readOnly", value);

                this.colorPicker.set("readOnly", value);

            },

            // Setter for intermediateChanges

            _setIntermediateChangesAttr: function(value) {

                this.colorPicker.set("intermediateChanges", value);

                this._set("intermediateChanges", value);

            },

            // Event handler for widget

            _onColorPickerChanged: function(value) {

                // summary:

                //    Handles the textbox change event and populates this to the onChange method.

                // tags:

                //    private

                 this._set("value", value);

                this.onChange(this.value);

            },                  

        }

    );

});

3. Add to the ClientResources\Styles\

ColorPicker.css (contains the styles for color picker)

Styles.css contains @import url("ColorPicker.css");

4. Add to the project module.config