2023年1月25日水曜日

リッチ・テキスト・エディタでHTMLを読み込むだけで元のHTMLが変更される

 現行のOracle APEXは、リッチ・テキスト・エディタとしてCKEditor5を使用しています。

このエディタは読み込んだHTMLを編集するのではなく、一旦、内部的なモデルに従ったデータに変換し、変換したデータを編集します。HTMLからCKEditor5のモデルに変換する処理をUpcast conversionと呼んでいます。モデルからHTMLに変換する処理はDowncast conversionです。マークダウンの場合でも同様に、Upcast conversionでマークダウンから内部モデルに変換、Downcast conversionでモデルからマークダウンに変換しています。

このような仕組みなので、CKEditor5で記述していると危険なHTMLの記述が含まれる可能性は低く、より安全であるといえます。

しかし、生成されるHTMLはCKEditor5のGUIの機能に制限されますし、他のツールで記述したHTMLもCKEditor5を通すと、CKEditor5のモデルで表現できない部分は削除されます。

ただしこれでは使いにくい場合もあるため、Oracle APEX 22.2の新機能として、リッチ・テキスト・エディタにプロパティとしてカスタムHTMLの許可(Allow Custom HTML)が追加されました。HTMLに記述されている属性(Attributes)、クラス(class)、スタイル(style)が保存の対象となっています。初期化JavaScriptファンクションを記述することにより、詳細な制御も可能です。

https://ckeditor.com/docs/ckeditor5/latest/api/module_html-support_generalhtmlsupport-GeneralHtmlSupportConfig.html

CKEditor5によって保存されるHTMLを確認するためのAPEXアプリケーションを作成しました。

https://apex.oracle.com/pls/apex/r/japancommunity/ckeditor5-test/

一番下のページ・アイテムP1_SOURCEに以下のHTMLを記述し、ボタンSave P1_SOURCEをクリックします。

<span class="u-danger">u-dangerを設定したテキスト</span>

リッチ・テキスト・エディタのプロパティカスタムHTMLの許可ONにしていると、classが削除されないためu-dangerの指定通りバックグランドが赤く表示されます。そうでない方のリッチ・テキスト・エディタでは、class指定は無視されます。


ボタンSave P1_CKEDIT as P1_SOURCEを押すと、classが削除されたデータが保存されます。そのため、ページ・アイテムP1_SOURCEの値は以下に変更されます。

<p>u-dangerを設定したテキスト</p>


カスタムHTMLの許可OFFのままHTMLの記述を維持するにはHTMLの挿入を呼び出し、HTMLスニペットとして記述します。


HTMLスニペットとして記述したHTMLは、CKEditor5によって変更されません。

HTMLスニペットは<div class="raw-html-embed">の子要素になります。


この記事で使用しているAPEXアプリケーションのエクスポートを以下に置きました。
https://github.com/ujnak/apexapps/blob/master/exports/ckeditor5-test.zip

APEXアプリケーション作成の参考になれば幸いです。