Strapi plugin logo for Editor.js

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.

thumbnail for Editor.js
Logo

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

  1. Install
1#npm
2npm install strapi-plugin-editorjs-field
1#yarn
2yarn add strapi-plugin-editorjs-field
  1. 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});
  1. 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];
  1. Add custom field in collection type or single type

Guide1

  1. Add field name

Guide2

  1. Configure tools

Guide3

Thanks

This code was developed based on the strapi-plugin-react-editorjs by melishev

License

MIT

Install now

npm install strapi-plugin-editorjs-field

STATS

6 GitHub stars20 weekly downloads

Last updated

342 days ago

Strapi Version

4.4.0 and above

Author

github profile image for Repin Yuriy
Repin Yuriy

Useful links

Create your own plugin

Check out the available plugin resources that will help you to develop your plugin or provider and get it listed on the marketplace.