Editor.jsについての備忘録1 基本

夕月悠里

Editor.jsを使ってあれこれしてみたいので色々と調べてみた。ほぼ公式の訳だったり参考記事と同じ内容だったり。自分の理解のため作成。


Editor.jsとは

公式ではNext generation block styled editorと呼んでいる。直訳すると次世代のブロックスタイルエディタ。

ブロックスタイルエディタとは最近のWordpressがデフォルトにしているGutenbergやブログサービスのMediumやnote(noteのエディタはMediumEditorをベースに開発されている)でも取り入れられているWYSIWYG（What You See is What You Get:見たままが得られる）エディタ。

ブロックスタイルとは文字通りブロックごとにスタイルを定義していく。これまでのWYSIWYGエディタだと裏側のデータがごっちゃごっちゃしていたが、ブロックスタイルだと各ブロックで独立して管理できるので整頓されている。また基本データはJSONなので扱いやすい。

ブロックスタイルはWordpressがデフォルト採用したこともあり将来性としてもよさそう。いずれ主流になるのではと思ってる。

今回とりあげるeditor.jsを使うと簡単にブロックスタイルエディタを導入できる。

公式：

ライセンス

Apache License 2.0

著作権表示とライセンス条項さえやっておけば商用利用可

使い方（公式をなんとなく翻訳）

3つのステップで利用できる。

1. Editor.jsをインストールする。

2. 初期化し、構成を設定

3. インストールしツールと連動させる。


Step1. Editor.jsのインストール

3つの方法がある。

1. node.jsでnpmして使う。

npm i @editorjs/editorjs --save-dev
yarn add --dev @editorjs/editorjs
import EditorJS from '@editorjs/editorjs';


2. CDNを使う。

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


3. Editor.jsのソースコードをダウンロードして使う。

<script src="editor.js"></script>


Step2. 初期化し、構成を設定

import EditorJS from '@editorjs/editorjs';


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

holderId: 'editorjs'でidを指定できる。

Step3. インストールしツールと連動させる。

editor.jsのコンセプトとしては最小限の構成で、必要なツールをインストールして使っていく。カスタマイズしていく感じ。初期はパラグラフ（p要素）ブロックだけ作られる。そこに以下のようなブロックを追加することができる。

・Header
・Link embeds
・Raw HTML blocks
・Simple Image (without backend requirement)
・Image
・Checklist
・List
・Embeds
・Quote

他のオプション

使うためには：

import EditorJS from '@editorjs/editorjs'; 
import Header from '@editorjs/header'; 
import List from '@editorjs/list'; 

const editor = new EditorJS({ 
 /** 
  * Id of Element that should contain the Editor 
  */ 
 holderId: 'editorjs', 
 
 /** 
  * Available Tools list. 
  * Pass Tool's class or Settings object for each Tool you want to use 
  */ 
 tools: { 
   header: Header, 
   list: List 
 }, 
})

こんな風にtoolsに登録する。


ツールのオプション

header: {
     class: Header, 
     inlineToolbar: ['link'] 
   },

class ：Tool のクラス
inlineToolbar ：インラインで使えるツールバーの指定
shortcut：ショートカットコマンドの登録
toolbox ：ツールバックスのアイコンやタイトル。

具体的な使い方（CDNを使用した場合）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">

<!--<link rel="stylesheet" href="main.css">-->
   <script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
</head>
<body>

<div id="editor"></div>

    
<script src="https://cdn.jsdelivr.net/npm/@editorjs/header@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/list@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/checklist@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/quote@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/code@latest"></script>
<script>const editor = new EditorJS({

   holder: 'editor',
                  tools: {
         header: Header,        
         list: List,        
         checklist: Checklist,
         quote: Quote,
         code: CodeTool
     }

});
    </script>
</body>
</html>

キャプチャ

以下、解説

まず本体を読み込む

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

次に置き場所を作る。

<div id="editor"></div>

で、必要なブロック要素を読み込む。（なくても可）

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

これだと、header, list, checklist, quote, codeが読み込める。

最後にeditorjsを初期化する。

<script>const editor = new EditorJS({

   holder: 'editor',
                  tools: {
         header: Header,        
         list: List,        
         checklist: Checklist,
         quote: Quote,
         code: CodeTool
     }

});

この時にインラインツールバーなどのオプションを追加可能。かなり簡単に組み込むことができる。

tools: { 
   header: {
     class: Header, 
     inlineToolbar: ['link'] 
   }, 
   list: { 
     class: List, 
     inlineToolbar: true 
   } 
 }

キャプチャ2

ただ、画面が真っ白なのでどこが境界線かわかりにくいのでCSSで調整しないといけないかも。

カスタマイズ

■デフォルトのデータでエディタを初期化する。

data：{}}）;

dataプロパティにJSONデータを入れるとそれが初期値になる。


■デフォルトブロックを変更

デフォルトでは段落になってる。それを変えるためにはinitialBlockを定める。

initialBlock："myOwnParagraph" ;

■Console出力

logLevel：で出力させるログを設定

VERBOSE	#すべてのメッセージを表示（デフォルト）
INFO	#情報とデバッグメッセージを表示する
WARN	#警告メッセージのみを表示
ERROR	#エラーメッセージのみを表示

キャプチャ3

データの保存

データを保存したいと思ったらsave()メソッドを呼び出す。

const editor = new EditorJS();

editor.save().then((outputData) => {
 console.log('Article data: ', outputData)
}).catch((error) => {
 console.log('Saving failed: ', error)
});

実際はボタンがクリックされた時に出力したりするので、ボタンのクリックイベントを作ってそこで動くようにすればよさそう。

キャプチャ4

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">

<!--<link rel="stylesheet" href="main.css">-->
  <script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
</head>
<body>

<div id="editor"></div>

<button id="save">保存</button>
   
<script src="https://cdn.jsdelivr.net/npm/@editorjs/header@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/list@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/checklist@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/quote@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/code@latest"></script>
<script>const editor = new EditorJS({

  holder: 'editor',
                 tools: {
        header: {
    class: Header, 
    inlineToolbar: ['link'] 
  },        
        list: List,        
        checklist: Checklist,
        quote: Quote,
        code: CodeTool
    }

});

const save = document.getElementById('save');

save.addEventListener('click', () => {
   
editor.save().then((outputData) => {
 console.log('Article data: ', outputData)
}).catch((error) => {
 console.log('Saving failed: ', error)
});
});
   </script>
</body>
</html>

キャプチャ5

Timestamp, ブロック, バージョンが保存。

ブロックにはそれぞれの要素のパラメータが付与されてる。

これをサーバー側でパースしてやればいい感じ。

データの規則性があって加工しやすそう。

参考


良ければサポートお願いします。サポート費用はサーバー維持などの開発費に使わせていただきます。