Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wandersonsousa/header-with-alignment
Plugin to use header with alignment for editorjs
https://github.com/wandersonsousa/header-with-alignment
alignmentforeditorjs editorheaderwithalign editorjs editorjsalignment headerwithalignment
Last synced: 3 months ago
JSON representation
Plugin to use header with alignment for editorjs
- Host: GitHub
- URL: https://github.com/wandersonsousa/header-with-alignment
- Owner: wandersonsousa
- License: mit
- Created: 2022-07-27T14:48:14.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2022-07-27T16:10:50.000Z (over 2 years ago)
- Last Synced: 2024-07-11T07:56:10.122Z (4 months ago)
- Topics: alignmentforeditorjs, editorheaderwithalign, editorjs, editorjsalignment, headerwithalignment
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/editorjs-header-with-alignment
- Size: 141 KB
- Stars: 2
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-editorjs - header-with-alignment - header block base tool with alignment control (Tools / Block Tools)
README
# Heading Tool
Provides Headings Blocks for the [Editor.js](https://ifmo.su/editor).
## Installation
### Install via NPM
Get the package
```shell
npm i --save editorjs-header-with-alignment
```
Include module at your application
```javascript
const Header = require("editorjs-header-with-alignment");
```
### 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,
},
...
});
```
## 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 |
| defaultAlignment | `string` | default alignment level |
```javascript
var editor = EditorJS({
...
tools: {
...
header: {
class: Header,
config: {
placeholder: 'Enter a header',
levels: [2, 3, 4],
defaultLevel: 3,
defaultAlignment: 'left'
}
}
}
...
});
```
## Output data
| Field | Type | Description |
| ----- | -------- | ---------------------------------------------------- |
| text | `string` | header's text |
| level | `number` | level of header: 1 for H1, 2 for H2 ... 6 for H6 |
| align | `string` | heder alignment: 'left', 'center', 'justify', 'right |
```json
{
"type": "header",
"data": {
"text": "Why Telegram is the best messenger",
"level": 2,
"align": "left"
}
}
```