Editorjs를 사용한 블록 에디터에 이미지 플러그인을 추가해보자 1

Editor.js에서 플러그인은 블럭에 사용할 수 있는 여러 기능을 제공하는 도구로, 아래와 같이 여러 블럭 속성을 사용할 수 있다.

만약 설치 후, 아무런 플러그인을 설정하지 않았다면 다음과 같이 기본 플러그인인 text와 지금부터 만들어볼 Image 플러그인을 볼 수 있다.

 

플러그인을 구현하기 위해서는 class를 선언하고, save, render, toolbox 메소드를 구현해야 한다.

class SimpleImage {
  static get toolbox() {
    return {
      title: "Image",
      icon: '<svg width="17" height="15" viewBox="0 0 336 276" xmlns="http://www.w3.org/2000/svg"><path d="M291 150V79c0-19-15-34-34-34H79c-19 0-34 15-34 34v42l67-44 81 72 56-29 42 30zm0 52l-43-30-56 30-81-67-66 39v23c0 19 15 34 34 34h178c17 0 31-13 34-29zM79 0h178c44 0 79 35 79 79v118c0 44-35 79-79 79H79c-44 0-79-35-79-79V79C0 35 35 0 79 0z"/></svg>',
    };
  }

  render() {
    return document.createElement("input");
  }
  save(blockContent) {
    return {
      url: blockContent.value,
    };
  }
}

export default SimpleImage;

 

toolbox() 메소드는 블록 메소드에 표시할 아이콘을 보여주는 기능을 하고, titler과 icon 값을 가지고 있어야 하며,

 

render() 메소드는 실제로 블럭에 보여질 요소를 그려주는 역할을 한다. 예시로 input 컴포넌트를 생성해본다.

save() 메소드는 에디터 저장 시, 해당 블럭의 저장 값을 생성하는 역할을 한다.

 

 

import EditorJS from "@editorjs/editorjs";
import { useEffect, useRef } from "react";
import SimpleImage from "../editorTool/simple-image/simple-image";

const Editor = () => {

.....

  useEffect(() => {
    if (editorRef.current) {
      return;
    }
    const editor = new EditorJS({
      holder: "editor",

      tools: {
        image: SimpleImage,
      },
    });
    editorRef.current = editor;
    
.....

  return (
    <>
      <button onClick={handleSave}>save</button>
      <div id="editor"></div>
    </>
  );
};

export default Editor;

저장 버튼을 클릭하면 아래와 같이 콘솔 로그에 저장 값을 볼 수 있다.