Editor.js
Editor.js is a block-style editor for rich media stories. It outputs clean data in JSON instead of heavy HTML markup. And more important thing is that Editor.js is designed to be API extendable and pluggable.
Strapi v4 - Editor.js + Strapi
Editor.js is a block-style editor for rich media stories. It outputs clean data in JSON instead of heavy HTML markup. And more important thing is that Editor.js is designed to be API extendable and pluggable.
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
- Paragraph Tool
- Embed Tool
- Table tool
- List Tool
- Warning Tool
- Code Tool
- Link Tool
- Image Tool
- Raw HTML Tool
- Heading Tool
- Quote Tool
- Marker Tool
- Checklist Tool
- Delimiter Tool
- InlineCode Tool
- Attaches Tool
- Component Selector
Instalation
- Install
1#npm
2npm install strapi-plugin-editorjs-field
1#yarn
2yarn add strapi-plugin-editorjs-field
- Add configuration plugin
1// config/plugins.ts
2export default ({ env }) => ({
3 editorjs: {
4 enabled: true,
5 // resolve: "./src/plugins/strapi-plugin-editorjs-field",
6 config: {
7 header: {
8 inlineToolbar: [
9 "bold",
10 "italic",
11 "hyperlink",
12 "marker",
13 "inlineCode",
14 ],
15 config: {
16 levels: [2, 3, 4],
17 defaultLevel: 2,
18 },
19 },
20 paragraph: : { inlineToolbar: true },
21 list: { inlineToolbar: true },
22 checklist: { inlineToolbar: true },
23 embed: null,
24 table: { inlineToolbar: true },
25 warning: null,
26 code: null,
27 link_tool: {
28 config: {
29 endpoint: `/api/editorjs/link`, // is required, this need for parser
30 },
31 },
32 raw: null,
33 quote: { inlineToolbar: true },
34 marker: null,
35 delimiter: null,
36 inlineCode: null,
37 image: null,
38 attaches: null,
39 component: null,
40 minHeight: 200,
41 },
42 },
43});
- 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):
1// ./config/middlewares.js
2
3export default [
4 ...
5 {
6 name: "strapi::security",
7 config: {
8 contentSecurityPolicy: {
9 useDefaults: true,
10 directives: {
11 "img-src": ["'self'", "data:", "blob:"],
12 "media-src": ["'self'", "data:", "blob:"],
13 upgradeInsecureRequests: null,
14 },
15 },
16 },
17 },
18 ...
19];
- Add custom field in collection type or single type
- Add field name
- Configure tools
Thanks
This code was developed based on the strapi-plugin-react-editorjs by melishev
License
Install now
npm install strapi-plugin-editorjs-field
Create your own plugin
Check out the available plugin resources that will help you to develop your plugin or provider and get it listed on the marketplace.