Skip to content

fluxxus/strapi-plugin-editorjs-custom-field

 
 

Repository files navigation

Logo

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.

example

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

Instalation

  1. Install
#npm
npm install @spalz/strapi-plugin-editorjs-field-help
#yarn
yarn add @spalz/strapi-plugin-editorjs-field-help
  1. 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,
    },
  },
});
  1. 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,
        },
      },
    },
  },
  ...
];
  1. Add custom field in collection type or single type

Guide1

  1. Add field name

Guide2

  1. Configure tools

Guide3

Thanks

This code was developed based on the strapi-plugin-react-editorjs by melishev

License

MIT

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 98.7%
  • JavaScript 1.3%