https://github.com/Matergi/editorjs-color-picker
Text Color Picker Tool for Editor.js 2.0
https://github.com/Matergi/editorjs-color-picker
Last synced: 3 months ago
JSON representation
Text Color Picker Tool for Editor.js 2.0
- Host: GitHub
- URL: https://github.com/Matergi/editorjs-color-picker
- Owner: Matergi
- License: mit
- Created: 2024-10-04T11:41:36.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-05-08T08:56:21.000Z (5 months ago)
- Last Synced: 2025-05-08T09:37:19.271Z (5 months ago)
- Language: TypeScript
- Homepage:
- Size: 60.5 KB
- Stars: 8
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-editorjs - editorjs-color-picker - Color Picker Tool (Tools / Block Tools)
README
# Color Picker Tool for Editor.js
https://github.com/user-attachments/assets/c22b0e96-a0a2-4187-ba7a-0e8be3cfe9d1
## Installation
You can install the package via npm or yarn:
```shell
yarn add editorjs-color-picker
```
Alternatively, you can use the CDN version.
```html
```
## Usage
### Using with a Package
Add a new Tool to the `tools` property of the Editor.js initial config.
```javascript
import ColorPicker from 'editorjs-color-picker';
const editor = new EditorJS({
...
tools: {
...
ColorPicker: {
class: ColorPicker,
},
}
...
});
```
If you don't want the text to retain its colors every time you copy and paste it into the editor, you can use the `ColorPickerWithoutSanitize` class.
```javascript
import { ColorPickerWithoutSanitize } from 'editorjs-color-picker';
const editor = new EditorJS({
...
tools: {
...
ColorPicker: {
class: ColorPickerWithoutSanitize,
},
}
...
});
```
### Using with CDN
If you're using the CDN, you can access the tool via `window.ColorPicker.default` or `window.ColorPicker.ColorPickerWithoutSanitize`.
```html
const { ColorPicker } = window;
const editor = new EditorJS({
...
tools: {
...
ColorPicker: {
class: ColorPicker.default, // or ColorPicker.ColorPickerWithoutSanitize
},
}
...
});
```
## Config Params
The Paragraph Tool supports these configuration parameters:
| Field | Type | Description |
| ------- | ---------- | --------------------------------------------------- |
| colors | `string[]` | (there are default colors) Array of colors you want |
| columns | `number` | (default: `7`) Number of columns to display |
## Issues with Copy and Paste
If you copy and paste text with a different background color, it adopts the style of the ``.
The only solution I’ve found so far, without modifying the paragraph component and its onPaste handler, is to apply this style.
For now, I’m only attaching it here without adding it to the library, as it might interfere with other plugins.
So, anyone interested should try applying this style:
```css
.ce-paragraph span {
background-color: unset !important;
}
```
If anyone finds a more elegant solution, can open a PR, and we’ll fix it.