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

• [x] Paragraph Tool
• [x] Embed Tool
• [x] Table tool
• [x] List Tool
• [x] Warning Tool
• [x] Code Tool
• [x] Link Tool
• [x] Image Tool
• [x] Raw HTML Tool
• [x] Heading Tool
• [x] Quote Tool
• [x] Marker Tool
• [x] Checklist Tool
• [x] Delimiter Tool
• [x] InlineCode Tool
• [x] Attaches Tool
• [x] 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

License

MIT