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: about 1 month 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 (about 4 years ago)
• Default Branch: main
• Last Pushed: 2023-04-17T07:56:02.000Z (over 1 year ago)
• Last Synced: 2024-10-02T00:11:02.812Z (2 months 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: 182
• Watchers: 7
• Forks: 40
• 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)

README

        
# Editor.js - Directus extension

Block-styled editor for rich media stories, outputs clean data in JSON. More info at https://editorjs.io/

![](https://raw.githubusercontent.com/dimitrov-adrian/directus-extension-editorjs-interface/main/screenshot.png)

## 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.