どうも、まさとらん（@0310lan）です！
今回は、Mediumなどにも採用されているブロックスタイルのテキストエディタを開発できるJavaScriptライブラリをご紹介します！
ヘッダー要素・リスト・画像など、それぞれのコンテンツを独立したブロックで管理することができ、保存時の出力はクリーンなJSONデータとして取得することができます。
また、簡単に開発できるプラグインにより、欲しい機能を好きなだけ拡張していくことも可能なので、オリジナルのテキストエディタにご興味ある方はぜひ参考にしてみてください！
なおpaizaラーニングでは、JavaScriptの基本が学べる講座「JavaScript入門編」を公開しています。そちらも合わせてチェックしてみてください。
【 Editor.js 】
■「Editor.js」の導入方法
それでは、最初にEditor.jsをどのように使えばよいのかを見ていきましょう。
導入方法としては主に3通りあります。
1つ目は、npmコマンドを使う方法。
Node.jsの開発環境が前提にはなりますが、npmコマンドから簡単にインストールできます。
npm install @editorjs/editorjs --save-dev
2つ目は、CDNを利用する方法。
Node.jsの開発環境が無かったりもっとシンプルに導入したい場合に最適で、次のようなscriptタグをHTMLに記述するだけで利用できます。
<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
3つ目は、ソースコードをダウンロードする方法。
公式のGitHubリポジトリから最新版のライブラリをダウンロードして、scriptタグから利用します。
<script src="editor.js"></script>
いずれの方法を使っても、できることは同じなので自分の環境に合ったやり方で始めてみましょう。
■「Editor.js」の基本的な使い方
導入ができたところで、さっそくEditor.jsを利用した多機能なテキストエディタを使ってみましょう。
使い方は簡単で、まずはテキストエディタを表示する場所をdivタグで指定します。
<div id="editor"></div>
ID属性値は好きな名称で構いません。
次に、JavaScriptでEditor.jsのインスタンスを作成します。
const editor = new EditorJS({ holder: 'editor' });
holderプロパティにID属性値を設定すれば完了です！
とりあえず、これだけの実装ですが実行すると基本的なテキストエディタが利用できるようになっています。
エンターキーを押すと独立されたブロックが構築されたり、マウスのドラッグで複数のブロックを選択したり削除することも可能です。
ただし、このままだとヘッダー・リスト・引用・画像の挿入など、一般的なテキストエディタで使える機能がまったく搭載されていません。
そこで、Editor.jsではプラグイン機能を使います！
実は、Editor.jsのライブラリ自体はテキストエディタとしてのコア機能だけに特化しており、それ以外のさまざまなエディタ機能についてはプラグインで自由に追加していくというスタンスになります。
たとえば、ヘッダー・リスト・チェックリスト・引用・コードブロックの機能を追加するには、それぞれ提供されているプラグインをscriptタグで読み込んでいきます。
（※プラグインリスト参照）
<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>
もちろん、Node.js環境のある方はnpmコマンドからでも導入可能です。
プラグインを読み込んだら、オプションにtoolsプロパティを作成してその中で利用したい機能を指定するだけで準備完了です！
const editor = new EditorJS({ holder: 'editor', tools: { header: Header, list: List, checklist: Checklist, quote: Quote, code: CodeTool } });
テキストエディタの部分をクリックすると、以下のような【ツールメニュー】を表示することができます。
このメニューからヘッダー要素やチェックリストなどを作成していくことができるわけです。
このように、テキストエディタの機能をパワーアップしてくれるプラグインは豊富に提供されており、たとえばテーブル表を挿入する機能も同じように追加できます。
テーブル表は【table】という名称のプラグインを読み込みます。
<script src="https://cdn.jsdelivr.net/npm/@editorjs/table@latest"></script>
そして、同様にJavaScriptからオプションへ【table】を設定するだけです。
tools: { header: Header, list: List, checklist: Checklist, quote: Quote, code: CodeTool, //テーブル機能を追加 table: Table, }
実行すると【テーブル機能】がメニューに追加されます。
テーブル表は枠の部分にマウスを近づけると表示される【＋】アイコンをクリックすれば、行・列を増やしていくことができます。
ここまでのサンプルコードを以下のリンクから閲覧できますので、ぜひ合わせて参考にしてみてください！
sampledemo/basic.html at master · webhacck/sampledemo · GitHub
■自作プラグインの作り方
豊富に提供されているEditor.jsのプラグインを利用すれば、だいたい欲しい機能はそろうのですが自分でプラグインを簡単に作成することも可能です。
サンプル例として、画像URLを貼り付けるだけでテキスト内に写真を挿入できるプラグインを作ってみましょう！
基本的な作り方としては、プラグインの機能を提供するクラス構文を書くだけなのでそれほど難しくはありません。
//プラグインを構成するクラス class EasyImage { //メニューバーにアイコンを表示 static get toolbox() { } //プラグインのUIを作成 render(){ } //保存時のデータを抽出 save(){ } }
クラス構文の中身は、主に3つの処理を記述するのが基本です。
- 【toolbox()】メニューバーにアイコンを追加
- 【render()】プラグイン機能のUIを構築する
- 【save()】保存時のデータを提供する
toolbox()によるアイコンの追加とは、以下のようにエディタをクリックして表示されるメニューに自作プラグインのアイコンを追加するという意味です。
toolbox()の作り方ですが、基本的にはアイコンの名称と画像を設定するだけです。
static get toolbox() { return { title: 'Image', icon: '<i class="fas fa-images"></i>' }; }
【title】プロパティに指定した名称はアイコンをマウスオーバーしたときに表示されます。【icon】プロパティはメニューバーに表示される画像を設定するのですが、今回はFont Awesomeを利用してみました。
次に、保存時のデータを取得するsave()ですが、今回の場合は画像のURLをデータとして返すようにすればよいですね。
save(data){ return { url: data.querySelector('img').src } }
引数dataにはブロックコンテンツの情報が格納されているので、この中にあるimg要素のURLを抽出しているわけです。
最後にメイン機能となるrender()の処理を作ってみましょう。
まず全体をdiv要素で囲み、その中にinput要素で画像URLを貼り付けられるようにしてみたいと思います。
render(){ const div = document.createElement('div'); const input = document.createElement('input'); input.addEventListener('paste', (event) => { //URLを取得して画像を表示する処理 }); div.appendChild(input); return div; }
イベント処理はURLが貼り付けられたときだけ反応するようにしています。最後に、全体のdiv要素をreturnで返すようにしておくのがポイントです。
イベント処理の中身については、実際に画像として画面に表示するように記述します。
input.addEventListener('paste', (event) => { const img = document.createElement('img'); img.src = event.clipboardData.getData('text'); img.width = 400; div.innerHTML = ''; div.appendChild(img); });
貼り付けた画像URLは【clipboardData.getData()】から簡単に取得できます。最後にブロックコンテンツをリセットしてからdiv要素へ出力するようにしましょう。
これで基本的なプラグインは完成です。
Editor.jsのオプションへ自作プラグインを追加しましょう！
const editor = new EditorJS({ holder: 'editor', tools: { //自作プラグインを追加 image: EasyImage } });
実行すると、以下のようにプラグインが追加されているので画像URLを貼り付けてみましょう！
写真を挿入できるようになりました。
このように、自分が欲しい機能を作成して追加するだけで、テキストエディタを自由にカスタマイズできるのがEditor.jsの大きな特徴と言えるでしょう。
今回作成したプラグインのソースコードは、以下のリンクから閲覧できますのでぜひ参考にしてみてください。
sampledemo/plugin.html at master · webhacck/sampledemo · GitHub
■「保存」ボタンの作成
テキストエディタに必須の機能として、書いた文章を保存するボタンを作成してみましょう。
保存ボタンについては何でも構わないのですが、とりあえず以下のようなボタンを配置しておきます。
<button id="save">保存</button>
このボタンを利用してクリックイベント処理を次のように記述すれば完成です！
const save = document.getElementById('save'); save.addEventListener('click', () => { editor.save() .then((savedData) => { console.log(savedData); }); });
editor.save()メソッドを利用することで、簡単にすべてのブロックコンテンツにあるデータを取得できるようになります。
たとえば、次のようなコンテンツがあるとします。
これを保存すると、以下のようにクリーンなJSONデータとして取得できるようになるわけです。
blocks: Array(4) 0: Object data: Object level: 2 text: "見出し" type: "header" 1: Object data: Object text: "サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。" type: "paragraph" 2: Object data: Object items: Array(3) 0: "項目１" 1: "項目２" 2: "項目３" length: 3 type: "list" 3: Object data: Object url: "https://cdn.****.com/hedgehog.jpg" type: "image" length: 4 time: 1565830778409 version: "2.15.0"
あとは、このJSONデータをローカルストレージやサーバへ送信すれば、簡単に保存することができるというわけです。
また、汎用性の高いJSONであることからAMPコンテンツやRSSなどに変換しても面白いでしょう。
■動画でプログラミングが学べるpaizaラーニング
動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。
「Python入門編」「C#入門編」「ITエンジニアの就活準備編」といった人気講座も完全無料となっておりますので、プログラミングを学びたい方・ITエンジニアを目指したい方はぜひごらんください。
■まとめ
今回は、ブロックスタイルのテキストエディタを簡単に開発できるJavaScriptライブラリについてご紹介しました。
非常にカスタマイズ性が高く、今回ご紹介した以外にもさまざまな制御をJavaScriptからできるようなメソッドがたくさん提供されています。また、プラグインによる機能拡張だけでなく、インラインから操作できる機能追加などもあります。
テキストエディタにご興味ある方や独自のエディタを開発したい人も含めて、ぜひオリジナルのエディタ構築を試してみてください！
＜参考リンク＞
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
詳しくはこちら
そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
詳しくはこちら
