@flowinity/tpu-editorjs-nested-list
v1.3.0-troplo1
Published
Nested list Tool for EditorJS
Downloads
7
Readme
Nested List Tool for Editor.js
Multi-leveled lists for the Editor.js.
Use Tab
and Shift+Tab
keys to create or remove sublist with a padding.
Installation
Install via NPM
Get the package
npm i --save @editorjs/nested-list
Or
yarn add @editorjs/nested-list
Include module at your application
import NestedList from '@editorjs/nested-list';
Load from CDN
Load the script from jsDelivr CDN and connect to your page.
<script src="https://cdn.jsdelivr.net/npm/@editorjs/nested-list@latest"></script>
Usage
Add the NestedList Tool to the tools
property of the Editor.js initial config.
import EditorJS from '@editorjs/editorjs';
import NestedList from '@editorjs/nested-list';
var editor = EditorJS({
// ...
tools: {
...
list: {
class: NestedList,
inlineToolbar: true,
config: {
defaultStyle: 'unordered'
},
},
},
});
Config Params
| Field | Type | Description |
|--------------|----------|----------------------------------------------------------------|
| defaultStyle | string
| default list style: ordered
or unordered
, default is unordered
|
Tool's settings
You can choose list`s type.
Output data
| Field | Type | Description |
| ----- | --------- | ---------------------------------------- |
| style | string
| type of a list: ordered
or unordered
|
| items | Item[]
| the array of list's items |
Object Item
:
| Field | Type | Description |
| ------- | --------- | ------------------------- |
| content | string
| item's string content |
| items | Item[]
| the array of list's items |
{
"type" : "list",
"data" : {
"style" : "unordered",
"items" : [
{
"content": "Apples",
"items": [
{
"content": "Red",
"items": []
},
{
"content": "Green",
"items": []
},
]
},
{
"content": "Bananas",
"items": [
{
"content": "Yellow",
"items": []
},
]
},
]
}
},