How to integrate Editor JS in NextJs(App Router) and ReactJs
A guide to integrate editorJs in NextJs and React. Adding multiple editorjs tools like heading, Hyperlink image etc.
Table of Content
Lets begin the journey to implement EditorJs.
Installation
Install Editor Js
1 npm i @editorjs/editorjs
install different tools of editorJs
1 npm i @editorjs/checklist @editorjs/code @editorjs/embed @editorjs/header @editorjs/image @editorjs/inline-code @editorjs/list @editorjs/paragraph @editorjs/quote editorjs-hyperlink
Configurations for EditorJS
Intialize a React and NextJs project
1 npx create-react-app editorjs-react
2
3 npx create-next-app editorjs-nextjs
creating an editor js config file
1 //editorjs.config.js
2
3 import CheckList from "@editorjs/checklist";
4 import Code from "@editorjs/code";
5 import Embed from "@editorjs/embed";
6 import InlineCode from "@editorjs/inline-code";
7 import Hyperlink from "editorjs-hyperlink";
8 import List from "@editorjs/list";
9 import Quote from "@editorjs/quote";
10 import Paragraph from "@editorjs/paragraph";
11 import Header from "@editorjs/header";
12 import Image from '@editorjs/image';
13
14 const EDITOR_CONFIG = {
15
16 code: Code,
17
18 header: {
19 class: Header,
20 config: {
21 placeholder: 'Enter a Heading',
22 levels: [2, 3, 6], //configure heading tags (e.g. h1,h2,h3 etc) to be shown in editorjs component
23 defaultLevel: 2
24 }
25 },
26
27 hyperlink: {
28 class: Hyperlink,
29 config: {
30 shortcut: 'CMD+L',
31 target: '_blank',
32 rel: 'nofollow',
33 availableTargets: ['_blank', '_self'],
34 availableRels: ['author', 'noreferrer'],
35 validate: false,
36 }
37 },
38
39 paragraph: {
40 class: Paragraph,
41 inlineToolbar: true
42 },
43
44 image: {
45 class: Image,
46 config: {
47 uploader: {
48 uploadByFile: (file) => { //this function will be triggered when image gets selected
49 return {
50 success: 1,
51 file: {
52 // i'm creating a blob from the image file you can do your api call to upload the image somewhere and store the actual url
53 url: URL.createObjectURL(file),
54 raw: file
55 }
56 }
57 }
58 }
59 }
60
61 },
62
63 checklist: CheckList,
64
65 embed: Embed,
66
67 inlineCode: InlineCode,
68
69 list: {
70 class: List,
71 inlineToolbar: true
72 },
73
74 quote: Quote
75 }
76
77 export { EDITOR_CONFIG }
78
Building up an Reusable Editor Component
1 //Editor.jsx
2
3 'use client';
4 import EditorJS from "@editorjs/editorjs";
5 import classes from '../styles/editorjs.module.css';
6 import { useEffect, useRef } from "react";
7 import { EDITOR_CONFIG } from "../configs/editorjs.config";
8
9 const Editor = ({ value, onChange, holder }) => {
10
11 const ref = useRef();
12
13 useEffect(() => {
14
15 if (!ref.current) {
16 const editor = new EditorJS({
17 holder: holder,
18 tools: EDITOR_CONFIG,
19 placeholder: 'Write an Amazing Blog',
20 data: value,
21 async onChange(api, event) {
22 const data = await api.saver.save();
23 onChange(data);
24 },
25 i18n: {
26 toolNames: {
27 Hyperlink: 'Link'
28 },
29 tools: {
30 hyperlink: {
31 Save: 'Salvar',
32 'Select target': 'Seleziona destinazione',
33 'Select rel': 'Wählen rel'
34 }
35 }
36 }
37 })
38
39 ref.current = editor;
40 }
41
42 return () => {
43 if (ref.current && ref.current.destroy) {
44 ref.current.destroy();
45 }
46 };
47 }, []);
48
49
50 return (
51 <div id={holder} className={classes.editorjs} py={4} border={'1px solid rgb(190, 195, 224, 0.4)'} borderRadius={6} />
52 )
53 }
54
55
56 export default Editor;
How to use it on React
1 // App.jsx
2
3 import { useState } from 'react'
4 import Editor from './components/Editor'
5
6 const App = () => {
7
8 const [data, setData] = useState('');
9
10 return (
11 <div>
12 <Editor value={data} onChange={setData} holder="editorjs-container" />
13 </div>
14 )
15 }
16
17 export default App
18
How to use it on NextJs App Router
1 'use client';
2 import dynamic from "next/dynamic";
3 import { useState } from "react";
4
5 const Editor = dynamic(() => import("@/components/Editor"), { ssr: false });
6
7 const page = () => {
8
9 const [data, setData] = useState('');
10
11 return (
12 <div>
13 <Editor value={data} onChange={setData} holder="editorjs-container" />
14 </div>
15 )
16 }
17
18 export default page;
Source Code
check here