editorjs-text-color-plugin-wsabates

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

<script src="https://cdn.jsdelivr.net/npm/editorjs-text-color-plugin@1.1.22/dist/bundle.js"></script>

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