Quote block tool for Editor.js
npm install @coolbytes/editorjs-quoteThis Editor.js block tool extends @editorjs/quote to include alignment options (see Preview).
#### Block Tool
!quote
#### Block Settings
!settings
Using npm
``sh`
npm install @coolbytes/editorjs-quote
Using yarn
`sh`
yarn add @coolbytes/editorjs-quote
Include it in the tools property of Editor.js config:
`js`
const editor = new EditorJS({
tools: {
quote: Quote
}
});
|Field|Type|Optional|Default|Description|
|---|---|---|---|---|
|placeholder|string|Yes|''|Placeholder text when empty|string[]
|quoteStyles||Yes|['simple', 'block']|All supported quote styles|string
|defaultQuoteStyle||Yes|'simple'|Preferred quote style|string[]
|alignTypes||Yes|['left', 'center', 'right', 'justify']|All supported alignment options|string
|defaultAlignType||Yes|'left'|Preferred alignment type|
`js`
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|string
|style||Quote style|string
|align||Alignment type|
Example:
`json``
{
"time": 1715969561758,
"blocks": [
{
"id": "_K5QcJHHuK",
"type": "quote",
"data": {
"text": "Some quote text",
"style": "block",
"align": "left"
}
}
],
"version": "2.29.1"
}