Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/VolgaIgor/editorjs-annotation
Allows to add an extended annotation to any text in EditorJS block
https://github.com/VolgaIgor/editorjs-annotation
editorjs editorjs-plugin
Last synced: 26 days ago
JSON representation
Allows to add an extended annotation to any text in EditorJS block
- Host: GitHub
- URL: https://github.com/VolgaIgor/editorjs-annotation
- Owner: VolgaIgor
- License: mit
- Created: 2023-07-03T16:55:03.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-07T13:24:46.000Z (2 months ago)
- Last Synced: 2024-10-07T13:52:18.837Z (2 months ago)
- Topics: editorjs, editorjs-plugin
- Language: JavaScript
- Homepage:
- Size: 210 KB
- Stars: 9
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-editorjs - VolgaIgor/editorjs-annotation
README
# Annotation Inline Tool for Editor.js
Allows to add an extended annotation to any text
## Preview
### Required
- Editor.js v2.30+
## Installation
### Install via NPM
Get the package
```shell
$ npm i editorjs-annotation
```
Include module at your application
```javascript
import Annotation from 'editorjs-annotation';
```
### 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
```javascript
var editor = EditorJS({
// ...
tools: {
// ...
annotation: Annotation
},
// ...
});
```
## Output data
Annotation will be wrapped with a `span` tag. with an `cdx-annotation` class.
Additional data will be store in element's dataset: `data-title`, `data-text`.
```json
{
"type" : "paragraph",
"data" : {
"text" : "Nuclear power plants have a carbon footprint..."
}
}
```