https://github.com/Aleksst95/header-with-anchor
Header Tool with anchor for Editor.js 2.0
https://github.com/Aleksst95/header-with-anchor
Last synced: 6 months ago
JSON representation
Header Tool with anchor for Editor.js 2.0
- Host: GitHub
- URL: https://github.com/Aleksst95/header-with-anchor
- Owner: Aleksst95
- License: mit
- Fork: true (editor-js/header)
- Created: 2020-08-28T13:09:04.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T20:10:49.000Z (almost 3 years ago)
- Last Synced: 2025-04-19T05:16:39.184Z (7 months ago)
- Language: JavaScript
- Homepage:
- Size: 353 KB
- Stars: 9
- Watchers: 0
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-editorjs - header-with-anchor - header block with the ability to set an anchor text (Tools / Block Tools)
README
# Heading Tool with anchor
Provides Headings Blocks with the ability to set an anchor text for the [Editor.js](https://ifmo.su/editor). Forked by [Header Tool](https://github.com/editor-js/header)
## Screenshot
## Installation
### Install via NPM
Get the package
```shell
npm i --save editorjs-header-with-anchor
```
Include module at your application
```javascript
const Header = require('editorjs-header-with-anchor');
```
### Download to your project's source dir
1. Upload folder `dist` from repository
2. Add `dist/bundle.js` file to your page.
## Usage
Add a new Tool to the `tools` property of the Editor.js initial config.
```javascript
var editor = EditorJS({
...
tools: {
...
header: Header,
},
...
});
```
Available characters: all Latin letters, digitals, dash, and underscore.
In the `cyrToLat` branch, you can find additional functionality: Cyrillic characters are replaced by Latin letters,
for example, `ш` to `sch`.
In the `maxLength` branch, you can find additional functionality: If you want to set the maximum length of the header text, you need to set the `checkHeaderLength` parameter to `TRUE` in the config.
In the `cyrToLat_with_maxLength` branch, you can find additional features from branches `cyrToLat` and `maxLength` at the same time.
P.S. The anchor value is displayed next to the header block only when there is text in the header block.
## 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 |
| allowAnchor | `boolean` | Anchor enabling (default: `true`) |
| anchorLength | `number` | Anchor length (default: `50`) |
```javascript
var editor = EditorJS({
...
tools: {
...
header: {
class: Header,
config: {
placeholder: 'Enter a header',
levels: [2, 3, 4],
defaultLevel: 3,
allowAnchor: true,
anchorLength: 100,
}
}
}
...
});
```
## Output data
| Field | Type | Description |
| ------ | -------- | ------------------------------------------------ |
| text | `string` | header's text |
| level | `number` | level of header: 1 for H1, 2 for H2 ... 6 for H6 |
| anchor | `string` | anchor's text |
```json
{
"type": "header",
"data": {
"text": "Why Telegram is the best messenger",
"level": 2,
"anchor": "Anchor"
}
}
```