Creating a Custom Blog Editor with Editor.js for Your Website
Written on
Chapter 1: Introduction to Editor.js
In 2022, we embarked on a journey to develop a story editor for our platform, iHateReading. Our goal was to create an interface that allows users to read and share technology stories seamlessly. This led us to the discovery of a useful package called Editor.js.
It's important to note that while Editor.js is not the only WYSIWYG editor available, alternatives like Draft.js and Slate.js offer similar functionalities. Personally, I find Editor.js more user-friendly and minimalist. In this guide, we will explore the essential features of Editor.js and how to integrate it into a React project.
Getting Started
Editor.js functions as a block-styled editor and is available as an npm module. This module provides a constructor that enables you to create an editor instance, which you will then link to a designated HTML element.
To get started, we need to install the necessary packages. Editor.js offers a variety of plugins to incorporate images, videos, embeds, and links. It's crucial to install each plugin manually and configure them in the Editor.js constructor.
yarn add @editorjs/editorjs
Creating the Constructor
Once the module is installed, you can create an instance of Editor.js using the constructor. This constructor requires specific parameters; without them, the editor will fail to render correctly. Treat these parameters like props; if they are missing, the editor will not display properly.
If you are using Editor.js in a Next.js project or a server-side rendering environment, you will need to implement a workaround to import the editor instance dynamically.
const editor = EditorJS({
holder: 'editorjs'
});
With the constructor in place, we need to find an ID that matches the holder value.
Rendering the Editor
After creating the constructor, we need an ID to attach the instance to the editor. The ID specified in the div element will render the editor component.
const EditorComponent = () => {
const editor = EditorJS({
holder: 'editorjs'});
return (
<div id="editorjs"></div>);
};
export default EditorComponent;
This div element will serve to display the Editor component.
Adding Plugins
By default, Editor.js only supports paragraph blocks. To include images, videos, links, and embeds, you must divide the editor into sections known as plugins. Each feature is a plugin, so to add an image to the editor, you'll need an image plugin and must provide its configuration within the Editor.js constructor.
Define the plugin configurations under the tools key.
import EditorJS from '@editorjs/editorjs';
import Header from '@editorjs/header';
const EditorComponent = () => {
const editor = EditorJS({
holder: 'editorjs',
tools: {
heading: {
class: Header,
shortcut: 'CMD+SHIFT+H',
}
}
});
return (
<div id="editorjs"></div>);
};
export default EditorComponent;
Editor.js retrieves the tool configurations and integrates the corresponding plugins into the editor component. You can similarly add other required plugins such as links, images, videos, embeds, and code by installing each one and adding the respective configurations.
Available Plugins
Every third-party integration is referred to as a plugin. Here's a list of plugins available in Editor.js:
- Header
- Link
- Embeds
- Raw HTML blocks
- Simple Image (no backend required)
- Image Checklist
- List
- Embeds Quote
You can find each plugin on its respective GitHub page.
APIs
Editor.js provides various APIs for data manipulation, UI modification, and data sanitization. The most commonly used API is the save method, which returns an array of data representing each block, its type, and its content.
editor.save().then(data => {
console.log(data, 'data');
});
The editor instance's save method returns a promise, which, when resolved, provides the complete data structure of all blocks that you can then store in your database.
Block Structure
Each block follows a straightforward schema:
const blocks = [
{
type: "paragraph",
data: { text: 'Title' },
id: "qpl8tGreMi"
}
];
Each block contains a type key to identify the element type (like <p> or <h>), a data key for text or URLs, and an id for distinguishing each block within the array.
Other Methods
Conclusion
You can download a ready-to-use repository for Editor.js integrated with Next.js from the link below for your custom editor needs. That's all for today; see you next time, and have a great day!
http://www.ihatereading.in/createrepo?framework=Miscelleneous&repoId=-Mt1kTvnfQiI7Psx8UaS
A comprehensive tutorial on configuring and installing Editor.js as a blog editor.
Explore the features of Editor.js, a next-generation block-styled content editor that enhances your editing experience.