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