Custom Color Picker TextField Editor for Orchard Core CMS

Orchard Core Freelance Developer

Orchard Core CMS has a number of built-in TextField editors: Standard, Multi-line, Icon Picker, and Predefined List. I was curious what it took to develop a custom text editor so I spent a couple of hours at Starbucks this past weekend developing a custom Color Picker for Orchard Core CMS.

Color Picker for Orchard Core CMS

When adding a TextField to a Content Type one can choose Color Picker as the editor. The Color Picker offers a default value setting where one can set the default color to be displayed for the field.

Custom TextField Editor Color Picker in Orchard Core CMS

Here is what it looks like to add a Color Picker TextField to the Page Content Type with the color set to green.

Color Picker For Orchard Core CMS

The custom editor uses the Spectrum jQuery Color Picker to choose and display colors. I didn't pick it for any particular reason. By default the color picker looks as follows.

Orchard Core CMS Color Picker

One could certainly change the UI as well as add additional editor settings to drive a more custom look and feel. One could also completely replace the chosen jQuery Color Picker and even use the browser's built-in color picker.