シンプルで使ってみたいWYSIWYGエディター Editor.js

本文書で今回紹介するのはNote, Medium, WordPressのGutenbergのようなブロックスタイルのWYSIWYGエディターのEditor.jsです。シンプルで使いやすそうだったのでどのように設定を行うのか確認しました。

動作確認はMacで行っていますがcdnで利用することができるため動作確認を簡単に行うことができます。

1 Ediror.jsとは
2 cdnを使って動かしてみよう
3 configの設定
- 3.1 paddingの設定
- 3.2 placeholderを設定
4 [付録]パッケージをインストールして動作確認

Ediror.jsとは

Editor.jsのページにはNext generation block styled editorと記述されている通りブロックスタイルのエディターです。

Editor.jsは主に下記の3つの特徴的な機能を持っています。

一つ目の特徴はブロックスタイルエディターということでヘッダー、パラグラフ単位にブロックが割り振られ、ブロック毎に編集を行い、ブロッグ毎に位置の入れ替えを行うことができます。Note, Medium, WordPressのGutenbergでも利用されている方法なのでブロックスタイルエディターということを意識せず利用している人も多いかと思います。

二つ目の特徴はブロックに記述した内容をJSONオブジェクトして取り出すことができます。JSONオブジェクトとして取り出せるので他のアプリケーションにも簡単に渡すことできます。JSONの構造さえわかればJSONオブジェクトの中身をHTMLページとして表示させることが可能です。

JSONオブジェクトにどのように保存されるかは後ほど確認することができます。

三つ目の特徴はパラグラフやヘッダーなどの既存で準備されているブロックだけではなく独自のブロックを作成しプラグインとして追加することができます。プラグインとして簡単に追加できるような仕組みになっているのでカスタマイズを行うことが可能です。

editor.jsはvue.jsやReactでも利用することができます。プラグインについてはhttps://github.com/editor-js/awesome-editorjsで確認することができます。

cdnを使って動かしてみよう

Editor.jsの動作確認はcdnを利用して行うことができます。cdnのURLは下記の通りです。


<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>

上記のcdnはEditor.jsのコア部分のみのコードしか含まれていないため、パラグラフのブロックしか利用できません。ヘッダーやリスト、画像のブロックを利用したい場合は追加でプラグインが必要となります。プラグインは自作することも可能です。

Editor.jsを利用するためには要素にidを設定してEditorJSをインスタンス化する際にholderプロパティに要素に設定したidの値を指定します。ここではidの値がeditorjsを持つdiv要素設定しています。後ほど利用するボタンも追加しています。


<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>Editor.js</title>
  </head>
  <body>
    <h1>Editor.jsを理解する</h1>
    <div id="editorjs"></div>
    <button>記事を保存する</button>
    <script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
    <script>
      const editorJS = new EditorJS({
        holder: "editorjs",
      });
    </script>
  </body>
</html>

ブラウザで確認するとh1タグで設定した文字列とボタン以外は何も表示されていません。

ブラウザをクリックするとブラウザ上にプラス(+)と四角の中に4つの四角が入ったアイコンが表示されることがわかります。これがブロックでその中に文字を入力することができます。

文字を入力してみよう

プラスのアイコンの右側から文字を入力することが可能です。右側の四角をクリックすると上下のアイコンとX(バツ)のアイコンが表示されます。バツをクリックするとそのブロックが削除されます。上下のアイコンは複数のブロックがある場合にブロッグを上下方向に移動させることができます。

文字を入力後にEnterを押すと新たにブロックが作成されます。下記では4つのパラグラフつまり4つのブロックで構成されています。このようにブロック単位でプラグラフを追加していくことができます。ブロックはその場所に固定されているわけではなくブロック単位で移動することができます。

入力した内容を取り出そう

ブラウザ上に文章が入力できることはわかりました。次は入力した文章を一括で取得する方法を確認していきます。

ボタンをクリックすると入力した内容が表示できるようにボタンにクリックイベントを設定します。入力したデータを取得するためにはsaveメソッドを利用します。


const btn = document.querySelector("button");

btn.addEventListener("click", function () {
  editorJS
    .save()
    .then((outputData) => {
      console.log("input Data ", outputData);
    })
    .catch((error) => {
      console.log("failed: ", error);
    });
});

ブロックに文章を入力後ブラウザ上にある”記事を保存する”ボタンをクリックするとデベロッパーツールのコンソールに入力した内容が表示されます。

time, blocks, versionを確認することができます。blocksの中の配列を展開すると配列の中に入力した文字列がtextとして保存されていることがわかります。デフォルトの状態では入力した内容とtypeのみがblocksの配列の中に保存されます。

入力した内容がsaveメソッドで取得でき、どのような形式で取得できるのか確認することができました。入力した内容の保存方法がわかりましたが、保存した内容を再度表示したい場合の方法が今のところわかりません。次はその方法を確認します。

保存した内容を表示させたい場合は？

ページを開いた時にこれまで入力した内容を表示させたい場合はdataプロパティを利用します。

本文書ではデータを保存する仕組みがないので、入力して取り出したデータを下記のようにdataプロパティに入れることで再度Editor.js上に表示させ、編集することが可能になります。


const editorJS = new EditorJS({
  holder: "editorjs",
  // minHeight: 20,
  data: {
    time: 1600854128568,
    blocks: [
      {
        type: "paragraph",
        data: {
          text: "ここに文字を入力することができます.",
        },
      },
      {
        type: "paragraph",
        data: {
          text: "Enterを押すと新しいブロックが作成されます。",
        },
      },
      {
        type: "paragraph",
        data: {
          text: "Enterを押すと新しいブロックが作成されます。",
        },
      },
    ],
    version: "2.8.1",
  },
});

下記のように取り出したJSONの内容を使うことで再度その内容を表示させることができます。

Editor.jsには初期化するときに実行されるonReadyや変更が行われたら実行されるonChangeコールバックもあります。これらの機能を利用してデータの設定やデータの自動保存などの処理を行うことができそうです。（実際に行ったことはありません。）

ヘッダータグを設定したい場合は

ここまで入力した内容はすべてパラグラフでしたヘッダータグを利用したい場合はどのように行うのか確認します。

Editor.jsのデフォルトの状態ではブロックにはパラグラフのみ利用することができます。ヘッダータグなど他のものを利用したい場合はプラグインで追加を行う必要があります。通常はimportを利用しますがここではcdnを利用して追加を行います。

ヘッダーブロックのプラグインのcdnを下記となります。


<script src="https://cdn.jsdelivr.net/npm/@editorjs/header@latest"></script>

追加したプラグインの設定は下記のように行います。levelsを設定することでヘッダータグのレベルを選択することができます。デフォルトのレベルも設定することできlevel3に設定しています。


const editorJS = new EditorJS({
  holder: "editorjs",
  tools: {
    header: {
      class: Header,
      config: {
        levels: [2, 3, 4],
        defaultLevel: 3,
      },
    },
  },

設定後プラスのアイコンをクリックするとTとHが表示されます。Hを選択するとヘッダータグとなり文字を入力するとデフォルトのh3として入力することができます。

Hはヘッダー、TはTextを表しており、Tを選択するとパラグラフのブロックになります。

h3タグなのでパラグラフと比較して文字が大きく太く表示されます。

右側の四角をクリックするとhタグを変更することも可能です。

saveメソッドで入力した内容を確認すると入力した内容の中にはh2,h3などのタグが含まれることはなく、levelプロパティが一緒に保存され、Typeはheaderになっていることが確認できます。

Listタグの追加

ListタグもHeaderタグと同様にプラグインを追加する必要があります。


<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/header@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/list@latest"></script>
<script>
    const editorJS = new EditorJS({
    holder: "editorjs",
    tools: {
        header: {
        class: Header,
        config: {
            levels: [2, 3, 4],
            defaultLevel: 3,
        },
        },
        list: {
        class: List,
        },
    },
    });

追加後プラスのアイコンをクリックするとリストのアイコンが追加されてリストで入力することがわかります。

また右側の四角のアイコンをクリックすると番号ありとなしのリストを選択することができます。

入力した内容を確認するとtextプロパティからitemsプロパティに変わり、styleプロパティが追加されordered、typeはListと表示されます。

configの設定

paddingの設定

デフォルトでは入力する領域とボタンまでの間にpadding:300pxが設定されているので入力する情報が少ない場合は離れすぎていると感じることがあります。

minHeightを設定することでpaddingの大きさを変更することができます。


const editorJS = new EditorJS({
  holder: "editorjs",
  minHeight: 50,

minHeightを設定するとpaddingの大きさが小さくなったことを確認することができます。

placeholderを設定

なにも入力を行っていない場合に画面には何も表示されないのでplaceholderの設定を行うことでユーザが何を入れるか判断する材料になります。しかしデフォルトでは最初のブロックはパラグラフなのでdataを使って空のヘッダーブロックを入れます。placeholderはconfigの中で設定を行います。


const editorJS = new EditorJS({
  holder: "editorjs",
  minHeight: 50,
  tools: {
    header: {
      class: Header,
      config: {
        placeholder: "見出しを入力してください",
        levels: [2, 3, 4],
        defaultLevel: 2,
      },
    },
    list: {
      class: List,
    },
  },
  data: {
    blocks: [
      {
        type: "header",
        data: {
          text: "",
          level: 2,
        },
      },
    ],
  },
});

画像用のプラグインや自作のプラグインを追加することも可能なのでさらに動作確認が必要ですがEditor.jsがどのようなものかはしっかり理解することできました。

[付録]パッケージをインストールして動作確認

CDNを利用して動作確認を行いましたがNode環境でパッケージをインストールするることで利用することも可能です。npmコマンドでeditorJsをインストールするためにはNodeのインストールが必須となります。node -Vコマンドを実行してNodeのバージョンが表示されることを確認してください。表示されない場合はNodeのインストールを行なってください。


 % node -v
v14.7.0

Nodeの確認ができたら任意の名前のフォルダを作成してnpm init -yコマンドを実行してください。package.jsonファイルが作成されます。

次にwebpackのインストールを行います。


 % npm install --save-dev webpack webpack-cli

次にeditorjsのインストールを行います。


  % npm i @editorjs/editorjs --save

srcフォルダを作成してその中にindex.jsファイルを作成してください。


import EditorJS from '@editorjs/editorjs';

const editor = new EditorJS({
  /**
   * Id of Element that should contain the Editor
   */
  holder: 'editorjs',
});

package.jsonファイルを開いてwebpackを実行するための設定を行います。scriptプロパティに以下の設定を行なってください。


  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
  },

npm run devを実行するとdistフォルダにmain.jsファイルが作成されるので、index.htmlファイルからscriptタグでそのファイルを指定します。


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script type="module" src="./dist/main.js"></script>
    <title>Document</title>
  </head>
  <body>
    <h1>Editor.jsを理解する</h1>
    <div id="editorjs"></div>
    <button>記事を保存する</button>
  </body>
</html>

下記の画面が表示されれば環境の構築は完了です。

シンプルで今後使ってみたいWYSIWYGエディター Editor.js