Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/VolgaIgor/editorjs-notice
Notice with caption for any Editor.js block
https://github.com/VolgaIgor/editorjs-notice
editorjs editorjs-plugin
Last synced: about 2 months ago
JSON representation
Notice with caption for any Editor.js block
- Host: GitHub
- URL: https://github.com/VolgaIgor/editorjs-notice
- Owner: VolgaIgor
- License: mit
- Created: 2022-07-24T13:50:35.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-03T13:30:43.000Z (4 months ago)
- Last Synced: 2024-11-09T08:18:14.835Z (2 months ago)
- Topics: editorjs, editorjs-plugin
- Language: JavaScript
- Homepage:
- Size: 114 KB
- Stars: 5
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-editorjs - VolgaIgor/editorjs-notice
README
# Notice with caption Block Tune for Editor.js
Tune for Editor.js adding color notice with caption for any block.
Caption field will be shown only for the first block of one type.
## Installation
### Install via NPM
Get the package
```shell
$ npm i editorjs-notice
```
Include module at your application
```javascript
import NoticeTune from 'editorjs-notice';
```
### Load from CDN
You can load a specific version of the package from jsDelivr CDN.
Require this script on a page with Editor.js.
```html
```
### Download to your project's source dir
1. Upload folder `dist` from repository
2. Add `dist/bundle.js` file to your page.
## Usage
### For all blocks
```javascript
var editor = EditorJS({
// ...
tools: {
// ...
noticeTune: NoticeTune
},
tunes: ['noticeTune']
// ...
});
```
### For certain blocks
```javascript
var editor = EditorJS({
// ...
tools: {
// ...
noticeTune: NoticeTune,
header: {
class: Header,
tunes: ['noticeTune']
}
}
// ...
});
```
## Config Params
You can add a localized string into notice caption placeholder
```javascript
new Editorjs({
// ...
tools: {
noticeTune: NoticeTune
},
i18n: {
tools: {
noticeTune: {
'Notice caption': 'Заголовок'
}
}
},
})
```
## Output data
If style is not set, then the tune data will not be serialized into JSON.
Also data returns in this format:
| Field | Type | Description |
| ----- | -------- | ------------------ |
| style | `string` | (`spoiler` or `info` or `warning`) Notice style |
| caption | `string` | Notice caption |
```json
{
// Block data
"tunes": {
"noticeTune": {
"style": "spoiler",
"caption": "Hidden content"
}
}
}
```