Text Color Tool for Editor.js
npm install editorjs-text-color-plugin
A simple tool Demo to color text-fragments for Editor.js.
Get the package
``shell`
npm i --save-dev editorjs-text-color-plugin
Import the plugin
`javascript`
const ColorPlugin = require('editorjs-text-color-plugin');
html
`Usage
Add the plugin to Editor.js: editing the
property in your Editor.js config.`javascript
var editor = EditorJS({
...
tools: {
... Color: {
class: ColorPlugin, // if load from CDN, please try: window.ColorPlugin
config: {
colorCollections: ['#EC7878','#9C27B0','#673AB7','#3F51B5','#0070FF','#03A9F4','#00BCD4','#4CAF50','#8BC34A','#CDDC39', '#FFF'],
defaultColor: '#FF1300',
type: 'text',
customPicker: true // add a button to allow selecting any colour
}
},
Marker: {
class: ColorPlugin, // if load from CDN, please try: window.ColorPlugin
config: {
defaultColor: '#FFBF00',
type: 'marker',
icon:
}
},
},
...
});
Config Params (optional)
| Field | Type | Description |
|------------------|-----------|----------------------------------------------------------------------------------------------------------------------------------------|
| colorCollections |
| Colors available in the palette. CSS variables, for example var(--main-text-color), are supported |
| defaultColor | string | Default color (if you do not set up a default color, it will be the first color of your color collections). CSS variables supported. |
| type | string | Set the plugin as a marker or a text color tool. It will be set as a text color tool as default. |
| customPicker | boolean | Turn on a random color picker in the palette, defaults to false. |
| icon | string | SVG string to replace default button icons. |Output data
Colored text will be wrapped with a
color tag with an color-plugin class.`json
{
"type" : "text",
"data" : {
"text" : "ColorPlugin."
},
}
``