WYSIWYGなエディタは長い歴史があります。CKEditorのような重厚なものが好まれた時期もあれば、現在はWebページ上でインラインで編集できるものが好まれる傾向にあります。様々なソフトウェアがありますが、今なお決定的なものがありません。 今回紹介するEditor.jsはブロックベースという特徴を持ったWYSIWYGエディタです。

Editor.jsの使い方

Webページです。見た目は普通のHTMLになっています。

マウスを当てると編集ができます。右端では並び替えが可能です。

文字を選択すると装飾が選べます。

文字の追加も可能です。

ブロックを足す際には画像や引用、ヘッダーなどを選べます。

画像の挿入例。

枠で囲んだ画像も使えます。

Editor.jsはJSONで出力されるので、再利用もしやすいのが特徴です。HTMLを記述することもできますが、基本的にMarkdown相当な記法指定になるようです。ユーザが直接編集するのにちょうど良さそうな機能と使い勝手を持ったソフトウェアと言えそうです。

Editor.jsはTypeScript製のオープンソース・ソフトウェア(Apache Licnese 2.0)です。

Editor.js codex-team/editor.js: A block-styled editor with clean JSON output