What it is?

This is a plugin for Strapi Headless CMS that replaces the standard wysiwyg editor with the Editor.js. This plugin is a fork of strapi-plugin-react-editorjs refactored to use in acf team.

Supported official add-ons

TODO: Update later

• [x] Paragraph Tool (default)
• [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] Typograf Tool
• [x] Highlight Blocktune
• [ ] Personality Tool
• [ ] Attaches Tool

Getting Started

yarn add strapi-plugin-react-editorjs
# or
npm install strapi-plugin-react-editorjs

In order for Strapi to show the Link Tool thumbnails correctly, you will need to edit the 'strapi::security' line in ./config/middlewares.js. Change that line to the following (do this at your own risk).

module.exports = [
  // ...
  {
    name: "strapi::security",
    config: {
      contentSecurityPolicy: {
        directives: {
          "img-src": ["*"],
        },
      },
    },
  },
  // ...
];

All plugins are disabled by default. If you need to enable editorjs plugin, you can provide a boolean flag in config/plugins.js

module.exports = {
  editorjs: {
    enabled: true,
    config: {
      header: true,
      image: true,
      quote: true,

      // Other available plugins
      typograf: false,
      highlight: false,
      embed: false,
      table: false,
      list: false,
      warning: false,
      code: false,
      LinkTool: false,
      raw: false,
      checklist: false,
      delimiter: false,
      marker: false,
      inlineCode: false,
    },
  },
};

How to contribute

Clone repository

Install dependencies

cd strapi-plugin-editorjs
yarn install

Create strapi app next to plugin

cd ..
npx create-strapi-app strapi-playground

Create plugins.js in config folder and add this code

module.exports = {
  ...

  editorjs: {
    enabled: true,
    resolve: "../strapi-plugin-editorjs",
  },
};

Start strapi in watch admin mode

yarn strapi develop --watch-admin

In development

1. Full screen mode
2. Settings tab to configure plugins
3. Medialib modal to upload images