https://github.com/editor-js/quote

Quote Tool for Editor.js 2.0
https://github.com/editor-js/quote

codex codex-editor editor plugin quote tool

Last synced: 3 months ago
JSON representation

Quote Tool for Editor.js 2.0

• Host: GitHub
• URL: https://github.com/editor-js/quote
• Owner: editor-js
• License: mit
• Created: 2018-07-31T15:40:14.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2024-06-29T14:33:35.000Z (4 months ago)
• Last Synced: 2024-07-07T00:01:27.012Z (4 months ago)
• Topics: codex, codex-editor, editor, plugin, quote, tool
• Language: JavaScript
• Homepage:
• Size: 169 KB
• Stars: 30
• Watchers: 3
• Forks: 57
• Open Issues: 26
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-editorjs - @editorjs/quote

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"

    }

}

```