Webアプリで入力を受け付けるコンテンツにtextareaタグがある。これは複数行テキスト入力が可能なコンテンツだ。メールフォームなどのフリーテキストの入力を求める場合に設置することが多く、お問い合わせページやアンケートページなどに入力した覚えがあるのではないだろうか。
このtextarea要素は、複数行入力できるとはいってもプレーンテキストであって、文字入力だけ許されている。機種依存ではあるが、絵文字を表現する程度だろうか。
もし太字や文字サイズをカスタマイズするような要件には向かない。というかtextareaで、これらカスタマイズはできない。文字通りテキストエリアなのである。
それに対して「WYSIWYGエディタ」ならば、太字や文字サイズ、見出し、リストなど表現できるものだ。管理WEB案件ではWYSIWYGエディタを求められるケースも少なくない。
このエントリーでは、WYSIWYGエディタフレームワーク「Editor.js」の紹介をしようと思う。
WYSIWYGエディタとは
WYSIWYGエディタ（ウィジウィグエディタ）とは、ディスプレイ画面上で表現した内容そのままを出力するエディタのことで、太字や文字サイズ、画像挿入などをサポートしてくれる。直感的に操作ができることからリッチテキストエディタとも呼ばれ、CMSやブログの管理画面には無くてはならないパーツのひとつである。
Editor.jsについて
Editor.jsは、リッチテキストエディタを実装するためのフレームワークで、ブロックスタイルを採用している。ブロックスタイルというのは、かつての単一入力エリアと異なり、入力エリア内でさらに個別のブロックで構成されていて、それぞれ見出し、段落、リスト、画像を担う。これらブロックは、プラグイン定義することで拡張できるように設計されている。
特徴
- JSONデータ出力
- 他ライブラリに依存しない
- 独自ブロックスタイルを作れる
- オープンソース
インストール
npm
npm install @editorjs/editorjs
# or
yarn add @editorjs/editorjsCDN
https://www.jsdelivr.com/package/npm/@editorjs/editorjs
設定
Editor.jsの初期化は、いたって簡単でマウント用のHTML空要素とモジュールパッケージをインポートすればよい。以下のとおりだ。
HTML
<div id="codex-editor"></div>JavaScript
import EditorJS from '@editorjs/editorjs';
const editor = new EditorJS('codex-editor');プラグイン設定
Editor.jsのブロックで、それぞれプラグイン定義することで拡張できるように設計されているということだった。必要な機能はプラグインで追加していく仕様となっている。
ちなみに段落ブロックはすでに組み込み済みで、プラグイン設定は不要だ。上記のとおり初期化するだけで段落ブロックは機能する。
以下は、見出しとリストのプラグインを追加した例だ。headerとlistプラグインのimportに際して、事前にインストールしなければならない。インストール方法は、上記リンクのREADME.mdから確認してほしい。
サンプル
import EditorJS from '@editorjs/editorjs';
import Header from '@editorjs/header';
import List from '@editorjs/list';
const editor = new EditorJS({
holderId: 'codex-editor',
tools: {
header: Header,
list: List,
},
});まとめ
Editor.jsのよいところは、特定のライブラリに依存しないところだろう。jQueryやReact、Angular、Vueのいずれとも併用することができる。そして出力データは、JSON形式に生成される。HTML形式で出力されるものと違って、オブジェクトデータの扱いやすさはご存知のとおりだと思う。この違いは大きい。管理Webサイトにリッチテキストエディタの実装を求められた場合、「Editor.js」は、よい選択になり得るかもしれない。
ブロックスタイルのリッチテキストエディタで対抗馬になるのは、Wordpress管理画面に実装されている「Gutenberg」あたりだろうか。Gutenbergのパッケージモジュールがあるようだが、残念ながら使ったことが無いから、その詳細はお伝えすることができない。もし知見を得る機会があれば、比較記事を書こうと思う。
このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。