Colorpicker With CodeMirror

This project was created to implement a color picker. It implemented basic functions for color and implemented image filters.

https://colorpicker.easylogic.studio/




Sample Image

Install

npm

``npm
npm install codemirror-colorpicker
`

bower

`
bower install codemirror-colorpicker
`



How to use (for browser)

`

`

How to use (for require, nodejs)

after npm install

script

`
require( 'codemirror-colorpicker' );

or

// es6
import 'codemirror-colorpicker/dist/codemirror-colorpicker.css'
import 'codemirror-colorpicker'
`

style

`

`

ColorPicker Options for CodeMirror

Set option - View mode

`javascript
{
colorpicker : true
}
`

Set option - Edit mode (open color picker)

`javascript
{
colorpicker : {
mode : 'edit'
}
}
`

Support short cut (for popup color picker)

It can open color picker on current cursor.

`javascript
{
colorpicker : {
mode : 'edit'
},
extraKeys : {
// when ctrl+k keys pressed, color picker is able to open.
'Ctrl-K' : function (cm, event) {
cm.state.colorpicker.popup_color_picker();
}
}
}
`

Support custom color paletts (since v1.5)

You can set custom color paletts (ex : material, ...).

`javascript
{
colorpicker : {
mode : 'edit',
colorSets: [
{ name : 'Material', colors : [ '#ffff', 'rgba(255, 255, 0, 0.5)' ] },
{ name : 'My Colors', colors : [ 'red', 'blue', 'white' ] },
{ name : 'Input Colors', edit: true }, // editable
]
}
}
`

Support color scale for palette

`javascript
{
colorpicker : {
mode : 'edit',
colorSets: [
{ name : 'Scale Colors', scale: ['red', 'yellow', 'black'], count : 5 },
]
}
}

`

Support Sketch Style

`javascript
{
colorpicker : {
mode : 'edit',
type: 'sketch'
}
}

`

Support Box Style

`javascript
{
colorpicker : {
mode : 'edit',
type: 'box'
}
}

`

Support only Palette Style

`javascript
{
colorpicker : {
mode : 'edit',
type: 'palette'
}
}

`

Developments

local dev

`
git clone https://github.com/easylogic/codemirror-colorpicker
cd codemirror-colorpicker
npm install
npm run dev
open localhost:10001
`

build

`
npm run build
``

License : MIT