Strapi-plugin-editorjs-field NPM

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

#npm
npm install strapi-plugin-editorjs-field

#yarn
yarn add strapi-plugin-editorjs-field

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,
    },
  },
});

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,
        },
      },
    },
  },
  ...
];