Text Color Tool

A simple tool Demo to color text-fragments for Editor.js.

Installation

Install via NPM

Get the package

npm i --save-dev @medistream/editorjs-text-color-plugin

Import the plugin

const ColorPlugin = require('@medistream/editorjs-text-color-plugin');

Load from CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/bundle.js"></script>

Usage

Add the plugin to Editor.js: editing the tools property in your Editor.js config.

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', 
      }     
    },
    Marker: {
      class: ColorPlugin, // if load from CDN, please try: window.ColorPlugin
      config: {
         defaultColor: '#FFBF00',
         type: 'marker', 
      }       
    },
  },
  
  ...
});

Config Params (optional)

| Field | Type | Description | | ------ | -------- |----------------------------------------------------------------------------------------------------------------------------------------| | colorCollections | array | 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 | | customPicker | boolean | Whether to show a custom color picker in the palette, defaults to false. |

Output data

Colored text will be wrapped with a color tag with an color-plugin class.

{
    "type" : "text",
    "data" : {
        "text" : "<font color="#00bcd4">Color</font><span style="background-color: rgb(236, 120, 120);"><font color="#ffffff">Plugin</font></span>."
    },
}

Recent Updates

| Field | Type | Description | |---------|-------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------| | V1.12.1 | Mar-25-2022 | CSS variable Support for colorCollection/defaultColor. This version supports the newest version of Editor.js (v2.23.2). Previous versions support Editor.js (v2.0) | | V1.13.1 | May-1-2022 | Thanks to HaoCherHong's contribution, we add a custom color picker in this version. |

Credits

UI Built Based on https://github.com/XboxYan/xy-ui by XboxYan
Marker Icon made by Freepik from www.flaticon.com

License

MIT