strapi-plugin-editorjs

👋 Get Started

Features Installation Configuration Contributing Requirements

✨ Features

• [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

🔧 Installation

yarn add @bigbossstudio/strapi-plugin-editorjs
# or
npm install @bigbossstudio/strapi-plugin-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': ['*'],
        },
      }
    },
  },
  // ...
];

In ./config/plugins.js add the following :

export default ({ env }) => ({
  // ...
  "editorjs": {
    enabled: true,
  },
  // ...
})

⚙️ How to extend/develop this plugin (optional)

If you want to change the look of the editor or add/remove editorJS plugins, you will need to do the following:

1. If this plugin is already install via yarn or npm, uninstall:

yarn remove @bigbossstudio/strapi-plugin-editorjs
# or
npm uninstall @bigbossstudio/strapi-plugin-editorjs

2. Go to the ./src/plugins folder (create it if it doesn't exist) and clone the project:

git clone https://github.com/BBS-Lab/strapi-plugin-editorjs.git

3. Go into the plugin and install dependencies:

• cd strapi-plugin-editorjs
• yarn install or npm install

4. In an editor add the following code into the main Strapi v4 ./config/plugins.js file (create the file if it doesn't exist)

module.exports = ({ env }) => ({
  // ...
  'editorjs': {
    enabled: true,
    resolve: './src/plugins/strapi-plugin-editorjs'
  },
  // ...
})

5. To make changes to EditorJS plugins, edit the ./src/plugins/strapi-plugin-editorjs/admin/src/config/customTools.js file.

• Note: the Image Tool add-on has been highly customized in order to work in Strapi and cannot be edited in the customTools.js file. If you wish to develop it further, you may, but it will take much more advanced knowledge and testing.

6. Rebuild Strapi after installation and after any changes made in the plugin.

yarn build
# or
npm run build

Please note that the add-ons are configured for Strapi, be careful when changing the configuration.

Forked from https://github.com/melishev/strapi-plugin-react-editorjs