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.
- Support for localization
- Support light / dark theme
- The option to disable specific tools for each field individually
- Access to configuration Editor.js tools
- 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
- Install
#npm
npm install @spalz/strapi-plugin-editorjs-field-help
#yarn
yarn add @spalz/strapi-plugin-editorjs-field-help
- Add configuration plugin
// config/plugins.ts
export default ({ env }) => ({
editorjs: {
enabled: true,
// resolve: "./src/plugins/strapi-plugin-editorjs-field",
config: {
header: {
inlineToolbar: true,
config: {
inlineToolbar: [
"bold",
"italic",
"hyperlink",
"marker",
"inlineCode",
],
levels: [2, 3, 4],
defaultLevel: 2,
},
},
list: { inlineToolbar: true },
checklist: { inlineToolbar: true },
embed: null,
table: { inlineToolbar: true },
warning: {
inlineToolbar: true,
},
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: { inlineToolbar: true },
image: null,
attaches: null,
component: {
config: {
components: [
{
name: "order_form",
alias: "Order form",
props: {},
preview: "/uploads/editrjs_form_cc432c18c8.png",
},
{
name: "leaderboard",
alias: "Leaderboard",
props: {},
preview: "/uploads/editorjs_leaderboard_3f669967c6.jpg",
},
],
},
},
minHeight: 200,
},
},
});- 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,
},
},
},
},
...
];- Add custom field in collection type or single type
- Add field name
- Configure tools
This code was developed based on the strapi-plugin-react-editorjs by melishev