This Editor.js block tool extends @editorjs/quote to include alignment options (see Preview).
Using npm
npm install @coolbytes/editorjs-quote
Using yarn
yarn add @coolbytes/editorjs-quote
Include it in the tools property of Editor.js config:
const editor = new EditorJS({ tools: { quote: Quote } });
| 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' } } } });
| 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"
}