CKEditor 5 内へ HTML を埋め込む CKEditor5 HTML Embed モジュール

こんにちは。ディレクターの菊池です。

早いもので入社して2年弱が経ちました。実はブログを一つも書いていなかったので、今回は Drupal 10 よりコアに取り込まれた標準エディタ "CKEditor 5" を拡張する CKEditor5 HTML Embed モジュールを紹介します。

CKEditor による HTML の書き換え問題

まずこのモジュールが必要となる背景です。CKEditor 5 は HTML5 に対応していないため、保存した HTML がそのまま保存されないケースがあります。

仮に一つの a タグの下に複数の要素をぶら下げたいとします。例えば下記のような HTML になるでしょう。

<a href="/">
    <h3>見出し1</h3>
    <h3>見出し2</h3>
</a>

これを CKEditor 5 のソースモードで入力して保存すると、下記のようになります。

<h3>
    <a href="/">見出し1</a>
</h3>
<h3>
    <a href="/">見出し</a>
</h3>

HTML の補完が行われ、a タグが子要素に移動してしまっているのが分かります。HTML 構造を維持して保存したい場合には、この自動補完が問題となります。

CKEditor 内で HTML 構造を維持して保存する

自動補完を避けたい時に利用できるモジュールが CKEditor5 HTML Embed モジュールです。

これはその名の通り CKEditor 内に HTML を埋め込むモジュールで、CKEditor 5 が用意する HTML embed 機能を Drupal で使えるようにしたものです。

使い方はシンプルで、モジュールインストール後「テキストフォーマットとエディター」の設定から「HTMLを挿入」ボタンを追加すれば OK です。

追加したボタンを押下すると、エディタ内に HTML スニペットを追加できます。

ここに先ほどの HTML を入れてコンテンツを保存してみると、、、 CKEditor の補完機能の影響を受けずに HTML をそのまま保存することができました。

メリット

このモジュールを利用する主なメリットは、前述の通り CKEditor の HTML 補完機能を回避し構造そのままで HTML を保存できる点です。

また、HTML で編集する箇所とエディタで編集する箇所を分離して保存したい場合にも有用です。例えば外部から取得してくる script や iframe のようなものを HTML スニペットとして分離できるため、エディタ上で見失うことがなく視認性が向上します。

デメリット

デメリットもいくつか存在しました。

まず、スニペット内で画像を用いる際にはエディタ内でアップロードした画像の状態が恒久的にならないため、別途画像フィールドを設ける必要があります。

また、シンタックスハイライトなどは用意されていないため、長い HTML の場合には編集しづらくなってしまうでしょう。縦幅も固定となっているため、元より長く複雑な HTML への利用は想定されていないと考えるべきでしょう。

まとめ

メリット・デメリットを踏まえると、短くシンプルな HTML コードを明示的に分離してエディタ内へ埋め込みたいような時には利用価値がありそうです。

複雑な HTML を自動補完無く利用する場合には The Code Mirror モジュールのような CKEditor 以外のエディタを利用する方法も存在します。しかしこれといった正解は無く、やはりデータ構造を丁寧に設計し、できる限り HTML はテンプレート側で記述すべきといったところです。

以上、CKEditor 5 内へ HTML を埋め込む CKEditor5 HTML Embed モジュールの紹介でした。