Editor.js

Editor.js is a block-style editor for rich media stories. It outputs clean data in JSON instead of heavy HTML markup. And more important thing is that Editor.js is designed to be API extendable and pluggable.

Install now

Strapi v4 - Editor.js + Strapi

Editor.js is a block-style editor for rich media stories. It outputs clean data in JSON instead of heavy HTML markup. And more important thing is that Editor.js is designed to be API extendable and pluggable.

example

Features

Support for localization
Support light / dark theme
The option to disable specific tools for each field individually
Access to configuration Editor.js tools

Supported all official add-ons

Instalation

Install

1#npm
2npm install strapi-plugin-editorjs-field

1#yarn
2yarn add strapi-plugin-editorjs-field

Add configuration plugin

1// config/plugins.ts
2export default ({ env }) => ({
3  editorjs: {
4    enabled: true,
5    // resolve: "./src/plugins/strapi-plugin-editorjs-field",
6    config: {
7      header: {
8        inlineToolbar: [
9            "bold",
10            "italic",
11            "hyperlink",
12            "marker",
13            "inlineCode",
14          ],
15        config: {
16          levels: [2, 3, 4],
17          defaultLevel: 2,
18        },
19      },
20      paragraph: : { inlineToolbar: true },
21      list: { inlineToolbar: true },
22      checklist: { inlineToolbar: true },
23      embed: null,
24      table: { inlineToolbar: true },
25      warning: null,
26      code: null,
27      link_tool: {
28        config: {
29          endpoint: `/api/editorjs/link`, // is required, this need for parser
30        },
31      },
32      raw: null,
33      quote: { inlineToolbar: true },
34      marker: null,
35      delimiter: null,
36      inlineCode: null,
37      image: null,
38      attaches: null,
39      component: null,
40      minHeight: 200,
41    },
42  },
43});

To ensure Strapi displays Link Tool thumbnails correctly, you should make a modification in the './config/middlewares.js' file. Please replace the 'strapi::security' line with the following (please proceed with caution):

1// ./config/middlewares.js
2
3export default [
4  ...
5  {
6    name: "strapi::security",
7    config: {
8      contentSecurityPolicy: {
9        useDefaults: true,
10        directives: {
11          "img-src": ["'self'", "data:", "blob:"],
12          "media-src": ["'self'", "data:", "blob:"],
13          upgradeInsecureRequests: null,
14        },
15      },
16    },
17  },
18  ...
19];