Editor.js はブロック単位でコンテンツを編集できるWYSIWYGエディタです。見出しや画像などの機能はプラグイン(Tool)として分離されており、本体はUIとデータ管理に専念します。編集結果はHTMLではなくクリーンなJSON形式で取得できます。
中心となるのはsrc/components/core.tsです。CoreはBlockManagerやToolbar、Saverなど各モジュールを初期化します。各モジュールはModule基底クラスを継承します。設定とイベントバスはコンストラクタ経由で各モジュールに渡されます。ブロックの種類はTool factoryとcollectionで管理されます。HeaderやImageなど外部パッケージを登録すると機能が拡張できます。編集時はPopoverコンポーネント群がツールバーや変換メニューの表示を担います。editor.save呼び出し時には、Saverモジュールがブロック内容をJSONへ変換します。変換の際はSanitizerが不要なHTMLを取り除きます。最終的なAPIはcodex.tsのexportAPIでプロトタイプに差し替えられます。これによりeditor.blocksやeditor.saveという形で外部にメソッドが公開されます。
- STEP 01
example.htmlのようにEditorJSへtoolsを渡して初期化すると、div#editorjsにブロック編集UIが表示されます。
- STEP 02
本体にはHeaderやImageなどのツールが含まれていないため、別パッケージを導入しないと見出しや画像ブロックは使えません。
- STEP 03
example/example.htmlを開くと、CDNから各ツールを読み込む構成が分かります。
- STEP 04
editor.save呼び出し後、typeとdataを含むJSONがPromiseで得られます。
- STEP 05
yarn build:testに続けてcypress runを実行すると、ビルド済みのeditorjs.umd.jsでE2Eテストが自動実行されます。
- STEP 06
yarn devでVite開発サーバーが起動し、ソースを編集すると変更が即座に反映されます。
new EditorJSを初期化すると、ブロック単位で編集できるUIがその場で手に入ります。editor.save呼び出しでは、blocksの配列にtypeとdataを持つクリーンなJSONが返ります。見出しや画像などの実際のブロック機能は、別パッケージのToolを追加して初めて使えるようになります。
コア単体には段落ブロックしか標準搭載されておらず、見出しや画像などのブロックは別パッケージのToolを個別に追加する必要があります。
ビルドはViteで行い、E2EテストはCypressでdist生成後に実行する構成のため、試すには一度ビルド手順を通す必要があります。
TypeScriptで書かれており、types配下の型定義に依存するため、プレーンJSで雑に使うと型の恩恵は得られません。
ブロック単位でコンテンツを編集し、HTMLではなくJSONとして保存したいCMSやノートアプリの開発者に向いています。コアの実装はModule基底クラスやTool factory、Popoverコンポーネントなど、設計意図がソースから明確に読み取れます。そのため実機で動かさなくても設計の信頼性は判断できます。ただし実際の見た目や操作感は、見出しや画像など各Toolパッケージを組み合わせて初めて確認できます。