-
Notifications
You must be signed in to change notification settings - Fork 122
/
README.md
111 lines (81 loc) · 2.09 KB
/
README.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
# Heading Tool
![Version of EditorJS that the plugin is compatible with](https://badgen.net/badge/Editor.js/v2.0/blue)
Provides Headings Blocks for the [Editor.js](https://ifmo.su/editor).
## Installation
Get the package
```shell
yarn add @editorjs/header
```
Include module at your application
```javascript
import Header from '@editorjs/header';
```
Optionally, you can load this tool from CDN [JsDelivr CDN](https://cdn.jsdelivr.net/npm/@editorjs/header@latest)
## Usage
Add a new Tool to the `tools` property of the Editor.js initial config.
```javascript
var editor = EditorJS({
...
tools: {
...
header: Header,
},
...
});
```
## Shortcut
You can insert this Block by a useful shortcut. Set it up with the `tools[].shortcut` property of the Editor's initial config.
```javascript
var editor = EditorJS({
...
tools: {
...
header: {
class: Header,
shortcut: 'CMD+SHIFT+H',
},
},
...
});
```
## Config Params
All properties are optional.
| Field | Type | Description |
| ------------ | ---------- | --------------------------- |
| placeholder | `string` | header's placeholder string |
| levels | `number[]` | enabled heading levels |
| defaultLevel | `number` | default heading level |
```javascript
var editor = EditorJS({
...
tools: {
...
header: {
class: Header,
config: {
placeholder: 'Enter a header',
levels: [2, 3, 4],
defaultLevel: 3
}
}
}
...
});
```
## Tool's settings
![An image showing the header block tool](https://capella.pics/634ad545-08d7-4cb7-8409-f01289e0e5e1.jpg)
You can select one of six levels for heading.
## Output data
| Field | Type | Description |
| ----- | -------- | ------------------------------------------------ |
| text | `string` | header's text |
| level | `number` | level of header: 1 for H1, 2 for H2 ... 6 for H6 |
```json
{
"type": "header",
"data": {
"text": "Why Telegram is the best messenger",
"level": 2
}
}
```