https://github.com/dimitrov-adrian/directus-extension-editorjs-interface
Block editor (Editor.js) interface for Directus 9
https://github.com/dimitrov-adrian/directus-extension-editorjs-interface
block-editor directus directus-extension directus-extension-interface editorjs
Last synced: 14 days ago
JSON representation
Block editor (Editor.js) interface for Directus 9
- Host: GitHub
- URL: https://github.com/dimitrov-adrian/directus-extension-editorjs-interface
- Owner: dimitrov-adrian
- License: gpl-3.0
- Created: 2020-12-05T12:58:43.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-04-17T07:56:02.000Z (almost 2 years ago)
- Last Synced: 2025-03-10T19:16:34.163Z (about 1 month ago)
- Topics: block-editor, directus, directus-extension, directus-extension-interface, editorjs
- Language: CSS
- Homepage: https://www.npmjs.com/package/directus-extension-editorjs
- Size: 1.65 MB
- Stars: 183
- Watchers: 6
- Forks: 38
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
- awesome-directus - Editor.js Interface - Block editor (Editor.js) interface for Directus 9. (Extensions / Community)
- awesome-editorjs - Editor.js - Directus Extension - Add an Editor.js interface to [Directus](https://github.com/directus/directus) (Libraries / Plugins for CMS)
- awesome-directus - Editor.js Interface - Block editor (Editor.js) interface for Directus 9. (Extensions / Community)
README
# Editor.js - Directus extension
Block-styled editor for rich media stories, outputs clean data in JSON. More info at https://editorjs.io/
## Installation
In your Directus installation root
```
npm install directus-extension-editorjs
```
Restart directus
## Usage
To use this custom interface into a data model, you have to:
- Add a simple field with **JSON** type
- In the **Interface** section on the left choose **Editor.js**
- Enjoy ! 🎉
### Example output of the interface
```json
{
"version": "2.19.0",
"time": 1607174917790,
"blocks": [
{
"type": "paragraph",
"data": {
"text": "Paragraph from editorjs interface in Directus."
}
}
]
}
```
For more info check https://editorjs.io/base-concepts#what-is-clean-data
## Building locally and contributing
You can also clone this repository and build it by yourself.
```
npm ci
npm run build
```
Then use `dist/index.js` in your custom `/extensions/interfaces` directory or in whatever you want.