Editor.js Font Size Plugin

A versatile inline tool for Editor.js that allows you to apply custom font sizes to your content.

Live Demo

Features

• Font Size Selection: Apply different font sizes from a configurable dropdown.
• Custom Font Sizes: Define your own font size options with custom labels.
• Visual Feedback: Current font size is highlighted in the dropdown.
• Keyboard Shortcut: Access the tool quickly with CMD+SHIFT+F.
• Single File: CSS is embedded in the JavaScript bundle for easy deployment.
• Clean UI: A modern and intuitive font size selector interface.

Installation

Install via npm

Get the package from npm and import it into your project.

npm install editorjs-font-size

Load from CDN

You can also load the bundled script from the jsDelivr CDN.

<script src="https://cdn.jsdelivr.net/npm/editorjs-font-size-plugin@latest/dist/bundle.js"></script>

Usage

If you installed via npm, import the tool class into your project:

import FontSizeTool from "editorjs-font-size";

Then, add the tool to your Editor.js instance's configuration:

const editor = new EditorJS({
  holder: "editorjs",
  tools: {
    fontSize: {
      class: FontSizeTool,
      inlineToolbar: true, // Set to true to display in the inline toolbar
    },
    // ... other tools
  },
});

If you are loading the script from the CDN, the FontSizeTool class will be available on the window object.

Configuration

You can customize the font size options by passing a config object.

const editor = new EditorJS({
  // ... other configurations
  tools: {
    fontSize: {
      class: FontSizeTool,
      config: {
        fontSizes: [
          { size: "12px", label: "Small" },
          { size: "14px", label: "Normal" },
          { size: "16px", label: "Medium" },
          { size: "18px", label: "Large" },
          { size: "20px", label: "Extra Large" },
          { size: "24px", label: "XXL" },
          { size: "28px", label: "XXXL" },
          { size: "32px", label: "Huge" },
        ],
        defaultSize: "14px",
      },
    },
  },
});

• fontSizes: An array of objects, where each object has a size (CSS font-size value) and a label (display name).
• defaultSize: The default font size to use when none is specified.

If no config is provided, the plugin will use its default font size options.

Output Data

The plugin saves the font-sized text within a <span> tag with the font-size-tool class and inline styles.

Example output for a paragraph block:

{
  "type": "paragraph",
  "data": {
    "text": "This is some <span class=\"font-size-tool\" style=\"font-size: 18px;\">large text</span> with normal text."
  }
}