ace-colorpicker-rpk
v0.0.13
Published
simple colorpicker for ACE Editor
Downloads
1,351
Readme
Colorpicker for ACE Editor
This project was created to implement a color picker. It implemented basic functions for color and implemented image filters.
Sample Image
Install
npm
npm install ace-colorpicker
How to use (for browser)
<link rel="stylesheet" href="/ace-colorpicker/dist/ace-colorpicker.css/>
<script src="/ace-colorpicker/dist/ace-colorpicker.min.js"></script>
How to use (for require, nodejs)
after npm install
Apply colorpicker
<script type="text/javascript" src="https://ajaxorg.github.io/ace-builds/src/ace.js"></script>
<link rel="stylesheet" href="./addon/ace-colorpicker.css" />
<script type="text/javascript" src="./addon/ace-colorpicker.js" ></script>
<script type="text/javascript">
var editor = ace.edit("sample_text_area");
editor.setTheme("ace/theme/solarized_light");
editor.session.setMode("ace/mode/css", () => {
AceColorPicker.load(ace, editor, { ....options });
})
</script>
Color code target
token with ace_color
class name
Support Mode
- ace/mode/css
- ace/mode/less
- ace/mode/scss
Options
hideDelay
Sets the delay time applied when the popup is closed. unit of ms
AceColorPicker.load(ace, editor, {
hideDelay: 1000
})
showDelay
Sets the delay time for opening the color picker. The default is 300ms.
The colorpicker opens only when the mouse is in the same place during the showDelay time.
AceColorPicker.load(ace, editor, {
showDelay: 1000
})
Developments
local dev
git clone https://github.com/easylogic/ace-colorpicker
cd ace-colorpicker
npm install
npm run dev
open localhost:10001
build
npm run build