All Projects → dimitrov-adrian → directus-extension-editorjs-interface

dimitrov-adrian / directus-extension-editorjs-interface

Licence: GPL-3.0 license
Block editor (Editor.js) interface for Directus 9

Programming Languages

CSS
56736 projects
typescript
32286 projects
Vue
7211 projects
javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to directus-extension-editorjs-interface

gatsby-source-directus7
Source plugin for pulling data into GatsbyJS from Directus CMS (https://directus.io)
Stars: ✭ 17 (-81.52%)
Mutual labels:  directus
editorjs-inline
Inline-Editor.js Tool for Editor.js
Stars: ✭ 23 (-75%)
Mutual labels:  editorjs
migration-tool
Automated script to migrate from Directus v8 to Directus v9
Stars: ✭ 21 (-77.17%)
Mutual labels:  directus
directus-metalsmith-snipcart
Lookbook web app with Directus' open source headless CMS, Metalsmith, Vue.js & Snipcart
Stars: ✭ 14 (-84.78%)
Mutual labels:  directus
editorjs-layout
Layout block tool for Editor.js.
Stars: ✭ 45 (-51.09%)
Mutual labels:  editorjs
docker-directus
🐇 Directus is an awesome database GUI that provides a feature-rich environment for rapid development and management of custom database schemas.
Stars: ✭ 13 (-85.87%)
Mutual labels:  directus
yith-proteo
Proteo is a sleek, modern and “Gutenberg-friendly” e-commerce theme. Developed with a beautiful UI and a minimal design, is perfect for each kind of shop. Easy to manage and to customize, Proteo is the best solution if you want a complete e-commerce template and start quickly to sell your products with WooCommerce without a technical knowledge. …
Stars: ✭ 22 (-76.09%)
Mutual labels:  block-editor
blocko
A block-based WYSIWYG editor.
Stars: ✭ 43 (-53.26%)
Mutual labels:  block-editor
gallery-block-lightbox
Adds a simple & lightweight Lightbox to the standard WordPress Image Gallery Block. No lock in and no dependencies.
Stars: ✭ 31 (-66.3%)
Mutual labels:  block-editor
editorjs-blocks-react-renderer
📔 Renders EditorJS blocks to semantic React HTML5 components. Unnopinated and flexible.
Stars: ✭ 80 (-13.04%)
Mutual labels:  editorjs
directus-conditional-fields
An interface to manage directus fields in the administration panel
Stars: ✭ 38 (-58.7%)
Mutual labels:  directus
django-hyper-editor
Django Integration of Hyper Editor
Stars: ✭ 29 (-68.48%)
Mutual labels:  block-editor
Directus
Open-Source Data Platform 🐰 — Directus wraps any SQL database with a real-time GraphQL+REST API and an intuitive app for non-technical users.
Stars: ✭ 13,190 (+14236.96%)
Mutual labels:  directus
wp-block-styles
WP Block styles are custom styles for existing blocks in the WordPress block editor
Stars: ✭ 25 (-72.83%)
Mutual labels:  block-editor
editorjs-style
Inline-style Tool for Editor.js
Stars: ✭ 23 (-75%)
Mutual labels:  editorjs
django-editorjs-fields
Django plugin for using Editor.js
Stars: ✭ 47 (-48.91%)
Mutual labels:  editorjs
editorjs-undo
Undo/Redo feature for Editor.js
Stars: ✭ 96 (+4.35%)
Mutual labels:  editorjs
strapi-plugin-react-editorjs
📝 Plugin for Strapi Headless CMS, hiding the standard WYSIWYG editor on Editor.js
Stars: ✭ 67 (-27.17%)
Mutual labels:  editorjs

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

{
	"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.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].