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

List Tool for Editor.js 2.0
https://github.com/editor-js/list

codex-editor editor li list ul

Last synced: about 2 months ago
JSON representation

List Tool for Editor.js 2.0

• Host: GitHub
• URL: https://github.com/editor-js/list
• Owner: editor-js
• License: mit
• Created: 2018-07-31T11:48:03.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2024-07-24T14:41:12.000Z (6 months ago)
• Last Synced: 2024-07-24T17:03:40.473Z (6 months ago)
• Topics: codex-editor, editor, li, list, ul
• Language: JavaScript
• Homepage:
• Size: 1.62 MB
• Stars: 53
• Watchers: 2
• Forks: 75
• Open Issues: 30
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-editorjs - @editorjs/list

README

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

# List Tool for Editor.js

This Tool for the [Editor.js](https://editorjs.io) allows you to add ordered or unordered (bulleted) lists to your article.

![](assets/example.gif)

## Installation

Get the package

```shell

yarn add @editorjs/list

```

Include module at your application

```javascript

import List from "@editorjs/list";

```

Optionally, you can load this tool from CDN [JsDelivr CDN](https://cdn.jsdelivr.net/npm/@editorjs/list@latest)

## Usage

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

```javascript

import EditorJS from '@editorjs/editorjs';

import List from '@editorjs/list';

var editor = EditorJS({

  // ...

  tools: {

    ...

    list: {

      class: List,

      inlineToolbar: true,

      config: {

        defaultStyle: 'unordered'

      }

    },

  },

});

```

## Config Params

| Field        | Type     | Description                                                    |

| ------------ | -------- | -------------------------------------------------------------- |

| defaultStyle | `string` | type of a list: `ordered` or `unordered`, default is `ordered` |

## Tool's settings

![](https://capella.pics/bf5a42e4-1350-499d-a728-493b0fcaeda4.jpg)

You can choose list`s type.

## Output data

| Field | Type       | Description                              |

| ----- | ---------- | ---------------------------------------- |

| style | `string`   | type of a list: `ordered` or `unordered` |

| items | `string[]` | the array of list's items                |

```json

{

    "type" : "list",

    "data" : {

        "style" : "unordered",

        "items" : [

            "This is a block-styled editor",

            "Clean output data",

            "Simple and powerful API"

        ]

    }

},

```

## I18n support

This tool supports the [i18n api](https://editorjs.io/i18n-api).

To localize UI labels, put this object to your i18n dictionary under the `tools` section:

```json

"list": {

  "Ordered": "Нумерованный",

  "Unordered": "Маркированный"

}

```

See more instructions about Editor.js internationalization here: [https://editorjs.io/internationalization](https://editorjs.io/internationalization)