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.

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

• Paragraph Tool
• Embed Tool
• Table tool
• List Tool
• Warning Tool
• Code Tool
• Link Tool
• Image Tool
• Raw HTML Tool
• Heading Tool
• Quote Tool
• Marker Tool
• Checklist Tool
• Delimiter Tool
• InlineCode Tool
• Attaches Tool
• Component Selector

Instalation

1. Install

#npm
npm install strapi-plugin-editorjs-field

#yarn
yarn add strapi-plugin-editorjs-field

2. Add configuration plugin

// config/plugins.ts
export default ({ env }) => ({
  editorjs: {
    enabled: true,
    // resolve: "./src/plugins/strapi-plugin-editorjs-field",
    config: {
      header: {
        inlineToolbar: [
            "bold",
            "italic",
            "hyperlink",
            "marker",
            "inlineCode",
          ],
        config: {
          levels: [2, 3, 4],
          defaultLevel: 2,
        },
      },
      paragraph: : { inlineToolbar: true },
      list: { inlineToolbar: true },
      checklist: { inlineToolbar: true },
      embed: null,
      table: { inlineToolbar: true },
      warning: null,
      code: null,
      link_tool: {
        config: {
          endpoint: `/api/editorjs/link`, // is required, this need for parser
        },
      },
      raw: null,
      quote: { inlineToolbar: true },
      marker: null,
      delimiter: null,
      inlineCode: null,
      image: null,
      attaches: null,
      component: null,
      minHeight: 200,
    },
  },
});

3. 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):

// ./config/middlewares.js

export default [
  ...
  {
    name: "strapi::security",
    config: {
      contentSecurityPolicy: {
        useDefaults: true,
        directives: {
          "img-src": ["'self'", "data:", "blob:"],
          "media-src": ["'self'", "data:", "blob:"],
          upgradeInsecureRequests: null,
        },
      },
    },
  },
  ...
];

4. Add custom field in collection type or single type

5. Add field name

6. Configure tools

Thanks

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

License

MIT