A simple tool Demo to color text-fragments for Editor.js.
Get the package
npm i --save-dev editorjs-text-color-plugin
Import the plugin
const ColorPlugin = require('editorjs-text-color-plugin');
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/bundle.js"></script>
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',
}
},
},
...
});
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 |
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>."
},
}
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) |
UI Built Based on https://github.com/XboxYan/xy-ui by XboxYan
Marker Icon made by Freepik from www.flaticon.com