# @editorjs/quote

> Quote Tool for Editor.js

Latest version **2.7.6** (published 2024-12-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install @editorjs/quote
pnpm add @editorjs/quote
yarn add @editorjs/quote
bun add @editorjs/quote
```

## Health

**Score 35/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.7.6 |
| Published | 2024-12-03 |
| First published | 2019-03-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 64.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 58 |
| Author | CodeX |
| Maintainers | codex-team |
| Keywords | codex editor, quote, editor.js, editorjs |

## Links

- npm: https://www.npmjs.com/package/@editorjs/quote
- Repository: https://github.com/editor-js/quote
- npm.io page: https://npm.io/package/@editorjs/quote

## Dependencies (2)

- [@editorjs/dom](https://npm.io/package/@editorjs/dom.md) ^0.0.5
- [@codexteam/icons](https://npm.io/package/@codexteam/icons.md) ^0.3.2

## Alternatives

- [ext-list](https://npm.io/package/ext-list.md) — 6.3M weekly downloads
- [@lexical/selection](https://npm.io/package/@lexical/selection.md) — 3.8M weekly downloads
- [@lexical/text](https://npm.io/package/@lexical/text.md) — 3.6M weekly downloads
- [@lexical/clipboard](https://npm.io/package/@lexical/clipboard.md) — 3.0M weekly downloads
- [@tiptap/extension-mention](https://npm.io/package/@tiptap/extension-mention.md) — 3.0M weekly downloads

## Recent versions

- 2.7.6 (latest) — 2024-12-03
- 2.7.5 — 2024-12-03
- 2.7.4 — 2024-11-24
- 2.7.3 — 2024-11-22
- 2.7.2 — 2024-08-23
- 2.7.1 — 2024-08-21
- 2.7.0 — 2024-08-16
- 2.6.0 — 2023-11-14
- 2.5.0 — 2022-11-29
- 2.4.0 — 2020-09-29
- 2.3.0 — 2019-07-01
- 2.2.1 — 2019-06-12
- 2.2.0 — 2019-03-02

## README

![](https://badgen.net/badge/Editor.js/v2.0/blue)

# Quote Tool

Provides Quote Blocks for the [Editor.js](https://editorjs.io).

![](https://capella.pics/017dca46-6869-40cb-93a0-994416576e33.jpg)

## Installation

Get the package

```shell
yarn add @editorjs/quote
```

Include module at your application

```javascript
import Quote from '@editorjs/quote';
```

Optionally, you can load this tool from CDN [JsDelivr CDN](https://www.jsdelivr.com/package/npm/@editorjs/quote).

## Usage

Add a new Tool to the `tools` property of the Editor.js initial config.

```javascript
var editor = EditorJS({
  ...
  
  tools: {
    ...
    quote: Quote,
  },
  
  ...
});
```

Or init Quote Tool with additional settings

```javascript
var editor = EditorJS({
  ...
  
  tools: {
    ...
    quote: {
      class: Quote,
      inlineToolbar: true,
      shortcut: 'CMD+SHIFT+O',
      config: {
        quotePlaceholder: 'Enter a quote',
        captionPlaceholder: 'Quote\'s author',
      },
    },
  },
  
  ...
});
```

## Config Params

| Field              | Type     | Description                 |
| ------------------ | -------- | ----------------------------|
| quotePlaceholder   | `string` | quote's placeholder string  |
| captionPlaceholder | `string` | caption's placeholder string|

## Tool's settings

![](https://capella.pics/0db5d4de-c431-4cc2-90bf-bb1f4feec5df.jpg)

You can choose alignment for the quote. It takes no effect while editing, but saved the «alignment» param.

## Output data

| Field     | Type     | Description          |
| --------- | -------- | -------------------- |
| text      | `string` | quote's text         |
| caption   | `string` | caption or an author |
| alignment | `string` | `left` or `center`   |


```json
{
    "type" : "quote",
    "data" : {
        "text" : "The unexamined life is not worth living.",
        "caption" : "Socrates",
        "alignment" : "left"
    }
}
```

---
_Source: https://npm.io/package/@editorjs/quote · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._