CoolBytesIN / editorjs-quote

Block quote for Editor.js

Quote block tool for Editor.js

This Editor.js block tool extends @editorjs/quote to include alignment options (see Preview).

Preview

Block Tool

Block Settings

Installation

Using npm

npm install @coolbytes/editorjs-quote

Using yarn

yarn add @coolbytes/editorjs-quote

Usage

Include it in the tools property of Editor.js config:

const editor = new EditorJS({
  tools: {
    quote: Quote
  }
});

Config Params

Field	Type	Optional	Default	Description
placeholder	string	Yes	''	Placeholder text when empty
quoteStyles	string[]	Yes	['simple', 'block']	All supported quote styles
defaultQuoteStyle	string	Yes	'simple'	Preferred quote style
alignTypes	string[]	Yes	['left', 'center', 'right', 'justify']	All supported alignment options
defaultAlignType	string	Yes	'left'	Preferred alignment type

 

const editor = EditorJS({
  tools: {
    quote: {
      class: Quote,
      config: {
        placeholder: 'Enter quote text',
        quoteStyles: ['simple', 'block'],
        defaultQuoteStyle: 'simple'
        alignTypes: ['left', 'center', 'right', 'justify'],
        defaultAlignType: 'left'
      }
    }
  }
});

Output data

Field	Type	Description
text	string	Quote text
style	string	Quote style
align	string	Alignment type

 

Example:

{
  "time": 1715969561758,
  "blocks": [
    {
      "id": "_K5QcJHHuK",
      "type": "quote",
      "data": {
        "text": "Some quote text",
        "style": "block",
        "align": "left"
      }
    }
  ],
  "version": "2.29.1"
}