<img alt="Logo" src="https://github.com/melishev/strapi-plugin-editor-js/blob/master/.github/assets/strapi-plugin-editorjs.png" width="400px">
🎛 Strapi + ✒️ Editor.js
⚠️ This is the Strapi v4 version of this plugin! In order to use with v3, please use release v.1.5.1.
🙉 What it is?
This is a plugin for Strapi Headless CMS that replaces the standard wysiwyg editor with the cool Editor.js and all its compatible add-ons.
🍀 Supported official add-ons
- 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
- Personality Tool
- Attaches Tool
All of the above add-ons (if added) work initially when the plugin is loaded. You can also customize the add-ons available in your application using the instructions below.
🤟🏻 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': ['*'],
},
}
},
},
// ...
];
⚙️ 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:- If this plugin is already install via yarn or npm, uninstall:
yarn remove strapi-plugin-react-editorjs
# or
npm uninstall strapi-plugin-react-editorjs
- Go to the ./src/plugins folder (create it if it doesn't exist) and clone the project:
# If you wish to clone the Master Branch
git clone https://github.com/melishev/strapi-plugin-react-editorjs.git
# If you wish to clone the Beta Branch
git clone --single-branch --branch beta https://github.com/melishev/strapi-plugin-react-editorjs.git
- Go into the plugin and install dependencies:
- `cd strapi-plugin-react-editorjs`
- `yarn install` or `npm install`
- 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-react-editorjs'
},
// ...
})
- To make changes to EditorJS plugins, edit the
./src/plugins/strapi-plugin-react-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.
- 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.
👨🏻🏭 Developing
- Personality Tool
- Attaches Tool
- Full screen mode