Text Color Tool

A simple tool（ Demo ） for coloring text-fragments for the Editor.js.

Installation

Install via NPM

Get the package

npm i --save-dev editorjs-text-color-plugin

Include module at your application

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

Load from CDN

Usage

Add a new Tool to the tools property of the Editor.js initial config.

var editor = EditorJS({
  ...
  
  tools: {
    ...

    Color: {
      class: ColorPlugin, // if load from CDN, please try: window.ColorPlugin
      config: {
         colorCollections: ['#FF1300','#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 | | defaultColor | string | default color | | type | string | set ths plugin as a marker or a text color tool |

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>."
    },
}

Plugin

Credits

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

License

MIT