@editorjsのインストール

@editorjsのインストール

@editorjsをReactで使用したのでその時のメモ

@editorjsとは

テキストエディタ開発用JavaScriptライブラリ

Apache License 2.0ライセンス

特徴

• ブロックスタイル
• 出力がJson形式で扱いやすい
• カスタマイズ性に富む
• プラグインをインストール・自分で開発することで専用のエディタを作れる

インストール

npm i @editorjs/editorjs

各種設定

エディター本体
onChangeは文字を入力するたびに呼ばれる

refでインスタンスを管理する

//./components/Editor
import React, { memo, useEffect, useRef } from "react";
import EditorJS, { OutputData } from "@editorjs/editorjs";
import Header from '@editorjs/header';
import Paragraph from "@editorjs/paragraph"
import { Tools } from "@/config/@editorjs/tools";
import { i18nConfig } from "@/config/@editorjs/i18n";

//props
type Props = {
  data?: OutputData;
  onChange(val: OutputData): void;
  holder: string;
};

const EditorBlock = ({ data, onChange, holder }: Props) => {
  //add a reference to editor
  const ref = useRef<EditorJS>();

  //initialize editorjs
  useEffect(() => {
    //initialize editor if we don't have a reference
    if (!ref.current) {
      const editor = new EditorJS({
        autofocus: true,
        holder: holder,
        data,
        tools: Tools,
        i18n: i18nConfig,
        async onChange(api, event) {
          const data = await api.saver.save();
          onChange(data);
        },
      });
      ref.current = editor;
    }

    //add a return function handle cleanup
    return () => {
      if (ref.current && ref.current.destroy) {
        ref.current.destroy();
      }
    };
  }, []);


  return <div className="max-w-none prose prose-sm h-screen" id={holder} />;
};

export default memo(EditorBlock);

プラグイン

オブジェクトにした方が管理しやすいと思ったのでまとめました。

プラグインは下記サイトにまとめてあるのでそちらを参照してください。

import Header from "@editorjs/header";
import Paragraph from "@editorjs/paragraph"

export const Tools = {
  header: Header,
  paragraph: Paragraph
}

言語変換

export const i18nConfig = {
  messages: {
    ui: {
      "blockTunes": {
        "toggler": {
          "Click to tune": "クリックして調整",
          "or drag to move": "またはドラッグして移動"
        },
      },
      "inlineToolbar": {
        "converter": {
          "Convert to": "変換"
        }
      },
      "toolbar": {
        "toolbox": {
          "Add": "追加"
        }
      }
    },
    toolNames: {
      "Text": "テキスト",
      "Heading": "見出し",
      "List": "リスト",
      "Warning": "警告",
      "Checklist": "チェックリスト",
      "Quote": "引用",
      "Code": "コード",
      "Delimiter": "区切り線",
      "Raw HTML": "HTML",
      "Table": "表",
      "Link": "リンク",
      "Marker": "マーカー",
      "Bold": "太字",
      "Italic": "斜体",
      "InlineCode": "インラインコード",
    },
    tools: {
      "warning": {
        "Title": "タイトル",
        "Message": "メッセージ",
      },
      "link": {
        "Add a link": "リンクを追加",
      },
      "stub": {
        'The block can not be displayed correctly.': 'このブロックは正しく表示できません。',
      },
    },
  },
};

呼び出す側

import { OutputData } from "@editorjs/editorjs";
import dynamic from "next/dynamic";
import { useState } from "react";

const EditorBlock = dynamic(() => import("../components/editor/editor"), {
  ssr: false
});

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

export default Editor;

参考サイト

参考にさせていただいた海外のサイトのURLを忘れてしまったので、再度見つけたら貼ります。

最後に

間違っていることがあれば、コメントに書いていただけると幸いです。
よろしくお願いいたします。