環境

・macOS Monterey 12.6
・PHP 8.1.13
・Laravel 9.3.12
・MySQL 8.0.31
・Docker 20.10.2
・Laravel Sail

Editor.jsとは

公式が掲げる主な特徴は以下の3つ

It is a block-styled editor
It returns clean data output in JSON
Designed to be extendable and pluggable with a simple API

導入フロー

インストール

方法としては3通り

Nodeパッケージ
CDN
プロジェクトにファイルを配置（GitHubのソースコードはこちら）

Laravel Sailなので、今回は以下を実行

sail npm i @editorjs/editorjs

インストール完了

packege-lock.json

"dependencies": 
{
   "@editorjs/editorjs": "^2.26.4"
}

実装

実装もとても分かりやすかったです。
Laravelプロジェクトの/resources/js配下にeditor.jsファイルを追加。
（ファイル名等は個人的な管理しやすさを優先してます。）

resources/js/editor.js

import EditorJS from '@editorjs/editorjs';

// 以下のどちらかを書く。おそらく大体の人は、結局2番目の書き方になります。
const editor = new EditorJS('koko-wo-soroeru');
const editor = new EditorJS ({
  holderId: 'koko-wo-soroeru',
});

editor.html

<!-- Laravelプロジェクトなので実際はeditor.blade.phpファイル -->
<div id="koko-wo-soroeru"></div>

これで画面にエディターが表示されます。

ただデフォルトでは、シンプルなテキスト入力と
太字・斜体・リンクに対応しているのみ。
プラグインでの拡張が基本のようなので、追加していきます。

プラグインの導入

プラグインの導入も、基本的にEditor.js本体と同様に3通りで実装が可能。
導入できるプラグインはこちらで確認してください。

今回自分が導入したのは以下のプラグイン。
・header（見出し）
・list（リスト）
・paragraph（空行有効化）
・image（画像アップローダー）

sail npm i @editorjs/header
sail npm i @editorjs/list
sail npm i @editorjs/paragraph
sail npm i @editorjs/image

各プラグインの設定はGitHubのREADMEを。
分かりやすくまとまっています。
（画像プラグインについては別途まとめます）

resources/js/editor.js

const editor = new EditorJS ({
  holderId: 'editor',
  tools: {
      header: {
        class: Header,
        config: {
          levels: [2, 3, 4],
          defaultLevel: 2
        }
      },
      list: {
        class: List,
        inlineToolBar: true,
        config: {
          defaultStyle: 'unorderd'
        }
      },
      paragraph: {
        class: Paragraph,
        inlineToolBar: true,
        config: {
          preserveBlank: true
        }
      }
  }
});

入力データの出力

エディタに入力されたデータはsave()メソッドで出力できます。
あとは用途に合わせて煮るなり焼くなりというわけですね。

今回は、ボタンを押すと出力される処理をjQueryで実装しました。
editor.save()以下のコードは公式で紹介されているものの転用です。

editor.html

<button id="get-editor-data" >editor.js出力！！</button>

resources/js/editor.js

$(function() {
  // データ保存
  $('#get-editor-data').on('click', function() {
    editor.save()
      .then((outputData) => {console.log('Article data: ', outputData)})
      .catch((error) => {console.log('Saving failed: ', error)});
  });
});

// outputData
// 出力されるJSONオブジェクトは以下のように3つのプロパティを含んでいる
{time: 1672207762160, blocks: Array(2), version: '2.26.4'}

// blocksのなかにテキスト情報が含まれる
blocks:[
    {
     id  : "J4ZvhsriKq",
     type:"paragraph",
     data:{
            text:"ああああああ"
           }
    },
    {
     id  :"El6S5s-QoM",
     type:"list",
     data:{
            style:"ordered",
            items:[
                    "ほほおほほほおほほほほh<br>ほほほほほほほほほほほ",
                    "ほほおほほほほほほほほほ"
                   ]
           }
    }
]

今回はここまで。
出力されたデータをどうDBへ保存するか
保存したデータをどう表示するか、再編集するか
といったことを知りたい方は、続きをどうぞ。（現在執筆中です）

参考

公式

その他