wildtassen

Använd editorjs med react/next

Cevin Wahlstedt - (11/24/2024)

Att snabbt kunna redigera och skapa nya siter, artiklar eller blogginlägg kan vara fördelaktigt mot att redigera rå html kod. I denna artikel visar jag hur man sätter sätter upp editorjs i react och använder sig av output datat.

Förutsättningar

Ett nextjs/react projekt
Grundläggande kunskaper i javascript

Sätt upp en återanvändningsbar editorjs komponent

En editorjs komponent för react.

Använder useRef() och useEffect() react hooks för att kunna använda EditorJs standardkomponent för javascript.

holder är id't som editorjs behöver för att fungera korrekt

EDITOR_TOOLS går vi igenom här nedan

Tänk på att initialiseringstiden kan ta lite tid

Javascript [jsx]

import React, {useEffect, useRef} from 'react';
import EditorJS from "@editorjs/editorjs"
import {EDITOR_TOOLS} from "./EditorTools";

const Editor = ({data, onChange, holder}) => {

    const ref = useRef();
    useEffect(() => {
        if(!ref.current){
            ref.current = new EditorJS({
                holder: holder,
                tools: EDITOR_TOOLS,
                data,
                async onChange(api) {
                    const data = await api.saver.save();
                    console.log(JSON.stringify(data))
                    onChange(data)
                },
            });
        }
        return () => {
            if (ref.current && ref.current.destroy) {
                ref.current.destroy();
            }
        };
    }, []);

    return <div id={holder} className="prose max-w-full" />
};

export default Editor;

Javascript

import InlineCode from "@editorjs/inline-code";
import Link from "@editorjs/link-autocomplete";
import List from "@editorjs/list";
import Paragraph from "@editorjs/paragraph";
import Header from "@editorjs/header"

export const EDITOR_TOOLS = {
    header: {
        class: Header,
        config: {
            placeholder: 'Enter a Header',
            levels: [1, 2, 3, 4],
            defaultLevel: 2
        },
        inlineToolbar: true
    },
    paragraph: {
        class: Paragraph,
        inlineToolbar: true
    },
    inlineCode: InlineCode,
    link: Link,
    list: List,
}

Exempel på EDITOR_TOOLS som har en del funktionalitet detta kan expanderas genom att använda andra blockverktyg.

Denna kan nu användas när du skapar en ny editorjs komponent.

tools: EDITOR_TOOLS

Använd editorjs komponenten i din applikation

När du skapat de tidigare filerna så skall du kunna använda Editor komponenten enligt exemplet under

Typescript [tsx]

import React, {useState} from 'react';
import Editor from "@/components/Editor";

const Example = () => {
    const [data, setData] = useState();
    return (
        <div>
            <Editor data={data} holder={"editorjs-container"} onChange={setData}/>
        </div>
    );
};

export default Example;

Du kan förladda komponenten med output data från tidigare sparad editorjs block data genom att sätta ett initial state på data.